title: Dynamic padding of elements below nav-bar fixed-top for small screens
body: <p>I use a navbar which extends in height for small window size due to the wrapping of the text logo (which is wanted). how can I dynamically change the padding for the jumbotron below, so it is not partially covered by the navbar for small window size (when the text logo is shown in several lines). (or any better solution)</p>
  
  <p>Relevante HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-md navbar-light bg-light fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;a class="navbar-brand logo-text" href="./index.html"&gt;
              &lt;span class="color-human"&gt;Logo Logo&lt;/span&gt; &lt;span class="color-education"&gt;Text Text&lt;/span&gt; &lt;span class="color-project"&gt;Snippet&lt;/span&gt;
          &lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
        &lt;ul class="navbar-nav ml-auto"&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link active " href="#"&gt;Item 1 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Item 2&lt;/a&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="jumbotron feature"&gt;
    &lt;div class="container"&gt;
      &lt;h1&gt;Some header&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .logo-text {
    white-space: normal;
  }
  
  body {
    padding-top: 3.5rem;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ichbinfranz/o19s3k4L/4/" rel="nofollow noreferrer">jsfiddle.net</a></p>