html - Navbar Burger(下拉)将内容向下推？

Question

当我的导航栏折叠时，汉堡菜单就会出现。每当我点击它时，下面的所有内容都会被下推，给我留下一个乱七八糟的主页。

我的导航栏:

<section class="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Film</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Info</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Über uns</a>
      </li>
    </ul>
  </div>
</nav>
</section>

我的 CSS:

body{
    text-align: justify !important;
}

#nav-bar{
    position: fixed;
  left: 0px;
  top: 0px;
    width: 100px;

}
.navbar-brand img{
    height: 40px;
    padding-left: 30;
}

.navbar-nav li{
    padding: 0 10px;
}

.navbar-nav li a{
    float: right;
    text-align: left;
}

.nav-bar ul li a:hover{
    color: #000000!important;
}

.navbar{
    background: #fff;
}

.navbar-toggler{
    border: none!important;
}

.nav-link{
    color: #555!important;
    font-weight: 600;
    font-size: 16px;
}

我尝试过使用 Z-Index 方法，但到目前为止没有成功。也许我做错了什么？

https://jsfiddle.net/Lqzs1jdw/8/

提前致谢。

Answer 1

你刚才打错了，将#改成。会解决这个问题

示例:

.nav-bar{
    position: fixed;
    width: 100%;
}

https://jsfiddle.net/aslamb/sfoavupd/2/