Как отделить шапку от контента?

Question

[mishka_aa]

Как отделить? И поставить на верх

Comments

[Dymok]

Разделить на два блока и задать шапке нижний маржин. Большего без кода сказать нельзя

[mishka_aa]

UnluckySerivelha,

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top" style="margin: 0 -15px 15px -15px;    border-bottom: 1px solid #26282f;">
  <button class="btn btn-dark navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <a class="navbar-brand" href="/">Блабла<span style="text-transform: none;color: #5c9df5;text-shadow: 1px 1px 21px #5c9df5;">.ru</span></a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="/users.html"><i class="icon-people fc"></i> Пользователи</a></li>
        <li class="nav-item"><a class="nav-link" href="/informaciya/5-o-proekte.html" ><i class="icon-info fc"></i> О проекте</a></li>
        <li class="nav-item"><a class="nav-link" href="/index.php?do=feedback"><i class="icon-call-in fc"></i> Контакты</a></li>
        <li class="nav-item"><a class="nav-link" href="/blogs/"><i class="icon-layers fc"></i> Блог</a></li>
        <li class="nav-item"><a class="nav-link" href="/statistics.html"><i class="icon-graph fc"></i> Статистика</a></li>
        <li class="nav-item"><a class="nav-link" href="/rules.html"><i class="icon-shield fc"></i> Правила</a></li>
      </ul>
    <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class=" nav-link" data-toggle="modal" data-target="#auth">
              <img src="{foto}" style="width: 32px;height: 32px;margin: -13px 5px -10px 0px;border-radius: 50%;object-fit: cover;"> %username_login%
          </a>
        </li>
      </ul>
  </div>
</nav>

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:focus, .navbar-brand:hover {
  text-decoration: none;
}

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 10px;
    padding-left: 10px;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-align: center;
      align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
}

.navbar-toggler:focus, .navbar-toggler:hover {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

[Павел Корнилов]

mishka_aa, без ссылки на страницу с проблемой никто не поможет.

[mishka_aa]

KorniloFF, for-dle.ru

[Павел Корнилов]

mishka_aa, уже понятнее. Теперь объясните, что значит отделить? Чтобы она пропадала при скролее?

[Павел Корнилов]

Тогда:

<nav style="margin: 0 -15px 15px -15px;    border-bottom: 1px solid #26282f;" class="navbar navbar-expand-lg navbar-dark bg-dark">

[mishka_aa]

KorniloFF, чтобы она была наверху страницы, отдельно от контента

[Павел Корнилов]

mishka_aa, тогда поставьте nav первым нодом в body.

[mishka_aa]

KorniloFF, все уезало

[Павел Корнилов]

Ничего не падает. И топ-меню реально отделено от контента.