My website has a navbar that increases in height for smaller window sizes due to the text logo wrapping. How can I adjust the padding dynamically for the jumbotron below, so it is not partially covered by the navbar when the text logo spans multiple lines? If you have a better solution, please let me know.
Relevant 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;
}