Динамическое заполнение элементов ниже фиксированной вершины навигационной панели для маленьких экранов

Question

Я использую панель навигации, которая увеличивается по высоте для небольшого размера окна из-за переноса текстового логотипа (который требуется). Как я могу динамически изменить отступ для jumbotron ниже, чтобы он не был частично покрыт панелью навигации для небольшого размера окна (когда текстовый логотип отображается в несколько строк). (или любое другое лучшее решение)

Релевантный HTML:

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand logo-text" href="./index.html">
            <span class="color-human">Logo Logo</span> <span class="color-education">Text Text</span> <span class="color-project">Snippet</span>
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link active " href="#">Item 1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotron feature">
  <div class="container">
    <h1>Some header</h1>
  </div>
</div>

CSS:

 .logo-text {
  white-space: normal;
}

body {
  padding-top: 3.5rem;
}

jsfiddle.net

Answer 1

Как объяснил здесь , невозможно динамически расположить элемент ниже элемента position:fixed с помощью CSS. По сути, панель навигации удаляется из потока DOM, поэтому jumbotron (и любые другие элементы страницы) не «знают» о размере или позиции панели навигации.

Возможный обходной путь для вас может заключаться в использовании position:sticky (Bootstrap sticky-top) вместо этого, чтобы получить эффект фиксированной навигационной панели. Тогда вам вообще не нужно будет использовать отступы ...

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand logo-text" href="./index.html">
            <span class="color-human">Logo Logo</span> <span class="color-education">Text Text</span> <span class="color-project">Snippet</span>
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      ...
    </div>
  </div>
</nav>
<div class="jumbotron feature">
  <div class="container">
    <h1>Some header</h1>
  </div>
</div>

https://www.codeply.com/go/EOH8sCCNnp