Как установить фиксированную навигационную панель и меню справа, не портя все?

Question

Я пытаюсь сделать меню как на этой веб-странице: https://socialyte.codeplus.it/wall.html

Проблема в том, что если поставить мою навигационную панель position: fixed все повреждено, как я могу ее решить?

Это мой HTML:

<div class="container-fluid row p-0 m-0">
            <div class="col-2 bg-black sidebar">

            </div>
            <div class="col-10 p-0 m-0 body">
                <nav class="navbar navbar-dark inline">
                    <ul class="d-flex navbar-custom navbar-nav mr-auto d-inline">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Perfil</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Publicar</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Cerrar Sesión</a>
                        </li>
                    </ul>
                </nav>
                <div class="col-md-10 offset-1">
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

А это мой CSS:

.body {
  background-color: #EDF1F5;
  margin-left: 16.69%!important;
}

.sidebar {
  background: #ffffff;
  box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
  position: fixed;
  z-index: 1;
}

.navbar .navbar-custom{
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

nav {
    background-color: #4F5467;
}

Answer 1

используйте закрепленное положение с top:0 и z-index:99 для навигационной панели:

.navbar{
  position: sticky;
  top:0;
  z-index: 99;
}

вот скрипка: https://jsfiddle.net/takius/de70temq/2/

или, если вы хотите position: fixed, вам нужно установить margin-top для div сразу после него:

.navbar {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
}

<div class="col-md-10 offset-1" style="margin-top:70px;">

Вот скрипка для этого: https://jsfiddle.net/takius/de70temq/3/

Answer 2

Это может привести вас на правильный путь. Вам все равно нужно будет отрегулировать ширину тела и боковую панель классов. Обратите внимание, что я добавил простой привет, чтобы увидеть что-то на боковой панели. * EDIT Кроме того, уберите элемент nav из элемента с классом body.

https://codepen.io/anon/pen/xjENLm

С тобой может быть легче играть. Он использует бутстрап.

.body {
  background-color: #EDF1F5;
  margin-left: 16.69%!important;
  margin-top: 65px;
}

.sidebar {
  background: #ffffff;
  box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
  position: fixed;
  z-index: 99;
}

.navbar .navbar-custom{
    min-height: 50px;
    background: #4F5467;
    font-size: 14px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
}

nav {
    background-color: #4F5467;
}

.card-container {
  margin-top: 180px;
}

<div class="container-fluid row p-0 m-0">
            <div class="col-2 bg-black sidebar">
              hello
            </div>
            <nav class="navbar navbar-dark inline">
                    <ul class="d-flex navbar-custom navbar-nav mr-auto d-inline">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Perfil</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Publicar</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Cerrar Sesión</a>
                        </li>
                    </ul>
                </nav>
            <div class="col-10 p-0 m-0 body">
                
                <div class="col-md-10 offset-1 card-container">
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                    <div class="card mt-3 border-0 rounded-0">
                      <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                          Some quick example text to build on the card title
                          and make up the bulk of the card's content.
                        </p>
                        <a href="#!" class="card-link">Card link</a>
                        <a href="#!" class="card-link">Another link</a>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>