html - 导航栏覆盖切换按钮

Question

当屏幕尺寸小到导航栏折叠时，导航栏覆盖切换按钮，打开后无法折叠导航栏，因为我无法访问导航栏下方的按钮。我试过设置 top: 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>导航栏始终位于顶部 10px。只需删除 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>