Как закрепить навбар?

Question

[Алексей]

Всем привет,помогите решить проблему, не могу сделать чтобы навбар был плавающим, т.е. при перемещении по сайту он оставался всегда наверху и пользователь его видел.

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <h4 class="navbar-brand"><strong><font size="4" color="black" face="arial black">B&R EXPAND LOGISTICS</font></strong></h4>
        </div>
        <nav class="my-2 my-md-0 mr-md-3">
          <a class="p-2 text-dark" href="/">Главная</a>
          <a class="p-2 text-dark" href="/trading">Биржа</a>
          <a class="p-2 text-dark" href="/data">Ваши данные</a>
          <a class="p-2 text-dark" href="/ourdata">Наши данные</a>
          {% if username %}
          <a class="p-2 text-dark" href="/personalroom">Комната</a>
          <a class="btn btn-outline-primary" id = "register_button" href="/auth/logout">Выход</a>
          {%else%}
          <a class="btn btn-outline-primary" id = "register_button" href="/auth/login">Вход</a>
          {%endif%}
        </nav>
      </div>
    </div>

.header-wrapper{
    max-width: 1400px;
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-nav{
    margin-left: 60px;
}
.header-menu{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 650px;
}

.header-menu-link{
    text-decoration: none;
    color: black;
    font-size: 18px;
    /* Ширина между элементами навбара */
    margin-right: 35px;
    line-height: 22px;
    cursor: pointer;

}
.header-menu-link-sign{
    color: #000000;
    padding-top: 5px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 2px;
    border: 2px solid #007bff;
    border-radius: 3px;
    font-size: 18px;
}
.header-menu-link-sign:hover {
    background-color: #e0ffff;
}

Answer 1

[Danny Arty]

Класс должен быть просто fixed-top, а не navbar-fixed-top

Comments

[Алексей]

Не помогает, он начинает так вообще с места съезжать на следующий блок

[Danny Arty]

Алексей, все нормально работает, просто z-index ему задайте

[Алексей]

Danny Arty, Спасибо, а в мобильной версии не подскажите как можно всё это в гамбургер свернуть?

[Danny Arty]

Алексей, если бы у вас стандартная bootstrap разметка была, то можно было бы сделать добавлением кнопки и пары классов, а так используйте скрипт

Answer 2

[Nick Sl]

sticky-top