导航栏覆盖切换按钮

Question

当屏幕尺寸小到导航栏折叠时，导航栏会覆盖切换按钮，打开导航栏后我无法折叠导航栏，因为我无法访问导航栏下方的按钮。我试图设置顶部：60px；在#navbar css 代码中，但这也会在更大的屏幕上向下移动导航栏。如何仅将小屏幕导航栏向下移动，使其不覆盖切换按钮？

这是我的导航栏 html 代码：

<nav class="navbar navbar-expand-sm navbar-light bg-faded navbar-fixed">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon" id=".navbar-collapse"></span>
</button>
<div class="collapse navbar-collapse">
  <ul id="navbar" class="navbar-nav mr-auto hide-on-med-and-down">
    <li class="nav-item active"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item"><a href="#">Projects</a></li>
    <li class="nav-item"><a href="#">Classes</a></li>
  </ul>
</div>

这里是css：

html, body {
  height: 100%;
}
body {
  margin: 0;
  background-color: lightsteelblue;
  background-image: url('http://hdw.datawallpaper.com/architecture/vintage-
    new-york-city-299988.jpg');
  background-position: center;
  background-size: cover;
  -webkit-background-blend-mode: overlay;
  -moz-background-blend-mode: overlay;
  background-blend-mode: overlay;
}

#navbar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #222;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
}

#navbar li {
  position: relative;
  float: left;
  line-height: 60px;
  background: inherit;
  text-align: center;
  transition: all .2s;
}

#navbar li a {
  position: relative;
  display: block;
  padding: 0 20px;
  line-height: inherit;
  color: white;
  text-decoration: none;
}

#navbar li:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background: #222;
  border-radius: 50%;
  transform: rotate(45deg);
  transition: all 0, background .2s;
}
#navbar li:hover:before {
  margin-top: 1px;
  border-radius: 50% 50% 0 50%;
  transition: all .1s, background .2s, margin-top .2s cubic-
  bezier(.5,30,.2,0);
}
#navbar li:hover,
#navbar li:hover:before {
  background: #3a3a3a;
}
#navbar li.active,
#navbar li.active:before {
  background: steelblue;
}

 @media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display: block !important;
}
.navbar-header {
    float: none;
}
}

.navbar-collapse.collapse.in {
  display: block!important;
}

提前致谢。

Answer 1

这是你的问题：

#navbar {
      position: absolute;
      top: 10px;
}

您正在设置您的<ul> 导航栏始终位于顶部 10 像素。只需删除top:10px

更新

你应该删除#navbar风格中的所有这些风格

position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      height: 60px;

最终的 HTML：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul id="navbar" class="navbar-nav mr-auto hide-on-med-and-down">
      <li class="nav-item active"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">About</a></li>
      <li class="nav-item"><a href="#">Projects</a></li>
      <li class="nav-item"><a href="#">Classes</a></li>
    </ul>
  </div>
</nav>

Answer 2

我从您的代码中创建了一个 sn-p，它工作正常。检查下面的sn-p结果

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: lightsteelblue;
  background-image: url('http://hdw.datawallpaper.com/architecture/vintage-
 new-york-city-299988.jpg');
 background-position: center;
  background-size: cover;
  -webkit-background-blend-mode: overlay;
  -moz-background-blend-mode: overlay;
  background-blend-mode: overlay;
}

#navbar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #222;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
}

#navbar li {
  position: relative;
  float: left;
  line-height: 60px;
  background: inherit;
  text-align: center;
  transition: all .2s;
}

#navbar li a {
  position: relative;
  display: block;
  padding: 0 20px;
  line-height: inherit;
  color: white;
  text-decoration: none;
}

#navbar li:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background: #222;
  border-radius: 50%;
  transform: rotate(45deg);
  transition: all 0, background .2s;
}

#navbar li:hover:before {
  margin-top: 1px;
  border-radius: 50% 50% 0 50%;
  transition: all .1s, background .2s, margin-top .2s cubic- bezier(.5, 30, .2, 0);
}

#navbar li:hover,
#navbar li:hover:before {
  background: #3a3a3a;
}

#navbar li.active,
#navbar li.active:before {
  background: steelblue;
}

@media (min-width: 768px) and (max-width: 991px) {
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.in {
    display: block !important;
  }
  .navbar-header .collapse,
  .navbar-toggle {
    display: block !important;
  }
  .navbar-header {
    float: none;
  }
}

.navbar-collapse.collapse.in {
  display: block!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-faded navbar-fixed">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon" id=".navbar-collapse"></span>
  </button>
  <div class="collapse navbar-collapse">
    <ul id="navbar" class="navbar-nav mr-auto hide-on-med-and-down">
      <li class="nav-item active"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">About</a></li>
      <li class="nav-item"><a href="#">Projects</a></li>
      <li class="nav-item"><a href="#">Classes</a></li>
    </ul>
  </div>
</nav>