Bulma 导航栏汉堡显示不正确

Question

当我点击 navbar-burger navbar-brand 移动时，navbar-menu 显示在最右侧。

navbar-burger 也显示在 navbar-brand 旁边。

如何让 navbar-burger 显示在右侧，并在 navbar 下或 navbar-burger 下显示 navbar-menu。

not active

active

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <span
      class="iconify icon:mdi-tent icon-inline:false"
      id="yelpcamp-icon"
    ></span>
    <h3 class="float-md-left mb-0 ml-4 brand">YelpCamp</h3>

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

  <div id="navBrrr" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="">Home</a>
      <a class="navbar-item" href="">Campgrounds</a>

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

        <div class="navbar-dropdown">
          <a class="navbar-item" href=""> About </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a href="" class="button is-info"
            >Profile</a
          >
          <a href="" class="button is-light">
            Logout</a>
          <a class="button is-primary" href="">
            Sign up
          </a>
          <a class="button is-light" href="">
            Log in</a>
        </div>
      </div>
    </div>
  </div>
</nav>

Answer 1

将此添加到样式以某种方式解决了我的问题。

@media only screen and (max-width: 1024px) {
  .navbar-menu {
    margin-right: 56%;
    width: 100%
  }
}

Bulma 导航栏汉堡显示不正确

Bulma navbar borgar not diplaying correctly

html

css

bulma