Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navbar not rendering properly #371

Open
ghost opened this issue Sep 28, 2021 · 1 comment
Open

Navbar not rendering properly #371

ghost opened this issue Sep 28, 2021 · 1 comment
Labels

Comments

@ghost
Copy link

ghost commented Sep 28, 2021

Describe the bug
As pictured, the links that should be to the right of the Navbar Brand are off in wrong place
Screenshot from 2021-09-28 13-20-11

<Router>

          <Navbar>
            <Navbar.Brand>
              <Navbar.Item href="#">
                <img
                  alt="Bulma: a modern CSS framework based on Flexbox"
                  height="28"
                  src="https://bulma.io/images/bulma-logo.png"
                  width="112"
                />
              </Navbar.Item>
              <Navbar.Burger />
            </Navbar.Brand>
            <Navbar.Menu>
              <Navbar.Container>
                <Navbar.Item href="#">
                  <Navbar.Link>
                    First
                  </Navbar.Link>
                  <Navbar.Dropdown>
                    <Navbar.Item href="#">
                      Subitem 1
                    </Navbar.Item>
                    <Navbar.Item href="#">
                      Subitem 2
                    </Navbar.Item>
                    <Navbar.Divider />
                    <Navbar.Item href="#">
                      After divider
                    </Navbar.Item>
                  </Navbar.Dropdown>
                </Navbar.Item>
                <Navbar.Item href="#">
                  Second
                </Navbar.Item>
              </Navbar.Container>
              <Navbar.Container align="end">
                <Navbar.Item href="#">
                  At the end
                </Navbar.Item>
              </Navbar.Container>
            </Navbar.Menu>
          </Navbar>

          <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
              <a class="navbar-item" href="https://bulma.io">
                <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
              </a>

              <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
              </a>
            </div>

            <div id="navbarBasicExample" class="navbar-menu">
              <div class="navbar-start">
                <a class="navbar-item">
                  Home
                </a>

                <a class="navbar-item">
                  Documentation
                </a>

                <div class="navbar-item has-dropdown is-hoverable">
                  <a class="navbar-link">
                    More
                  </a>

                  <div class="navbar-dropdown">
                    <a class="navbar-item">
                      About
                    </a>
                    <a class="navbar-item">
                      Jobs
                    </a>
                    <a class="navbar-item">
                      Contact
                    </a>
                    <hr class="navbar-divider" />
                    <a class="navbar-item">
                      Report an issue
                    </a>
                  </div>
                </div>
              </div>

              <div class="navbar-end">
                <div class="navbar-item">
                  <div class="buttons">
                    <a class="button is-primary">
                      <strong>Sign up</strong>
                    </a>
                    <a class="button is-light">
                      Log in
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/about">
              <About />
            </Route>
          </Switch>

        </Router>
@ghost ghost added the bug label Sep 28, 2021
@kennethnym
Copy link
Collaborator

@kennedybaird apologies for the silence, are you still having this issue? If so, can you put this code in a code sandbox so that I can play around with it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant