@Eldenhard

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

Всем привет,помогите решить проблему, не могу сделать чтобы навбар был плавающим, т.е. при перемещении по сайту он оставался всегда наверху и пользователь его видел.
<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;
}
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
DanArst
@DanArst
Э, Ойboy!
Класс должен быть просто fixed-top, а не navbar-fixed-top
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@deadshumz
Используйте position: sticky
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы