Question

我正在使用最新版本的布尔玛。我正在尝试建立一个静态HTML / CSS网站。导航是相当不常规的。它具有居中元素，但还有右对齐元素。

在台式机上，我对外观很满意，但是在移动设备上，整个菜单消失了。

我创建了一个Codepen。

代码如下：

HTML

<section class="hero is-large">
  <div class="hero-head">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a
          role="button"
          class="navbar-burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="nav-menu"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu" id="nav-menu">
        <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-start navbar-start--centered">
            <a href="">Products</a> <a href="">Our Story</a>
            <a href="http://127.0.0.1:5500/home.html" class="logo">
              <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Lineage_OS_Logo.png" width="170" />
            </a>
            <a href="">Blog</a> <a href="">Contact Us</a>
          </div>

          <div class="navbar-end">
            <a class="cart">
              <i class="fas fa-cart-plus"></i> <span>0</span>
            </a>
            <a class="login"> <i class="fas fa-user"></i> Log in </a>
          </div>
        </div>
      </div>
    </nav>
  </div>
  <div class="hero-body is-hidden-mobile">
    <div class="container"></div>
  </div>
</section>

CSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.navbar-start--centered {
  flex-grow: 1;
  justify-content: center;
}

.navbar .navbar-start a {
  padding: 30px 50px;
  color: #194522;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.navbar .navbar-start a.logo img {
  fill: #194522;
}

.navbar .navbar-start a.logo:hover img,
.navbar .navbar-start a.logo:hover img:hover {
  fill: #abcf39;
}

.navbar .navbar-end a {
  padding: 30px 20px;
  color: #194522;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.navbar .navbar-start a:hover,
.navbar .navbar-end a:hover {
  color: #abcf39;
}

.navbar .navbar-end a i {
  padding-right: 6px;
}

#logo {
  width: 200px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.hero {
  background-color: #f3e2f3;
}

我希望在移动设备上看到的是该下拉菜单，其中包含产品，我们的故事，博客和联系我们链接。我不确定自己在做什么错，但是我怀疑是因为我菜单不正常。

Answer 1

您的课程.navbar-menu太多了。此类的元素在移动设备上隐藏。使用Javascript，将添加类is-active，以使其再次在移动设备上可见-单击该汉堡包后，该样式即会出现：

@media screen and (max-width: 1087px)
.navbar-menu.is-active {
    display: block;
}

您还有第二个嵌套的.navbar-menu：

<div class="navbar-menu" id="nav-menu">
        <div id="navbarBasicExample" class="navbar-menu"> <!-- still hides menu, even when hamburger was clicked -->

您只能使用一次此类。嵌套的菜单永远不会添加类is-active，因此菜单保持隐藏状态。

布尔玛中心和右对齐的导航。移动设备问题

1 个答案: