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

我为您的代码制作了一个代码段并且工作正常。检查下面的代码段结果

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这是你的问题：

#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>

导航栏覆盖切换按钮

2 个答案: