couds / react-bulma-components

React components for Bulma framework
MIT License
1.2k stars 126 forks source link

Navbar not rendering properly #371

Open ghost opened 2 years ago

ghost commented 2 years ago

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>
kennethnym commented 2 years ago

@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?