Question

当我点击导航栏-汉堡时，导航栏品牌移动，导航栏菜单显示在最右侧。

还有导航栏品牌旁边的导航栏汉堡展示。

如何在右侧显示导航栏-汉堡并在导航栏下或导航栏-汉堡下显示导航栏菜单。

<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 导航栏 borgar 显示不正确

1 个答案: