引导导航栏折叠列表出现在移动视图中其他元素的底部

Question

我正在尝试制作一个网页。我有一个问题，引导导航栏折叠列表出现在其他元素下。我尝试将列表位置设置为相对位置以及以下元素位置。还改变了不透明度并放置了背景，但它不起作用。我有一项任务，导航栏不应固定在顶部。由于某种原因，也将鼠标悬停在其元素上无法正常工作。我将不胜感激任何帮助）。

这是查看该页面的链接：。

并链接到代码存储库：

相关HTML代码如下：

  <body>
    <header>
      <nav id="header-nav" class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <div class="navbar-brand">
              <a href="index.html"><h1>Food, LLC</h1></a>
            </div>
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#navbar-collapse"
              aria-expanded="false"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div id="navbar-collapse" class="collapse navbar-collapse opacity-100">
            <ul id="nav-list" class="nav navbar-nav">
              <li><a href="#Chicken">Chicken</a></li>
              <li><a href="#Beef">Beef</a></li>
              <li><a href="#Sushi">Sushi</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <div id="Menu" class="container-fluid text-center">Our Menu</div>
    <div class="container-fluid text-center">
      <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
          <p class="itm" id="Chicken">Chicken</p>
          <p class="cntnt">
<!-- the content-->

和CSS：

/*  Header */
#header-nav {
  position: relative;
}

#navbar-collapse > #nav-list > li > a:hover {
  background: #acacac;
}

.navbar-header button.navbar-toggle {
  clear: both;
}
.nav>li>a {
  display:none;
}

/* Extra small devices */
@media (max-width: 767px) {
 div > .navbar-collapse{
  max-height: 175px;  
 }
  #navbar-collapse > #nav-list > li > a {
    display:block;
  }
}

Answer 1

尝试将此样式值添加到相应的类中

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
    z-index: 999999;
    position: relative;
    overflow-y: hidden;
}

引导导航栏折叠列表出现在移动视图中其他元素的底部

问题描述投票：0回答：1

1个回答

最新问题

引导导航栏折叠列表出现在移动视图中其他元素的底部

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1