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/