My website loads with everything in the right place, but as soon as I start scrolling, the content moves onto the navbar and hides at the top of the screen. I want the navbar to remain at the top of the screen at all times and have the content hidden under it.
Here is my navbar code:
<a class="navbar-brand d-flex align-items-center" href="/">
<a class="navbar-brand" href="/"><img src="img/full_trimmed_transparent_base (3).png" width="381"height="76" class="d-inline-block mr-1 align-bottom" alt=""></a>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="...">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/home"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about_cattery"> O ... </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> ...</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> ...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> ... </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> ...</a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/...
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>
Here is my CSS for the navbar:
.navbar {
position: fixed;
top: 0;
background-color: rgba(240,240,240,0.5);
width: 100%;
}
.nav-item {
font-size: 100%;
padding-left:3px;
padding-right:3px;
}
.icon {
color: #3b5998;
font-size: 120%;
}
.icon:hover {
color: #92a6d3;
}
.scrolled {
background-color: rgba(240,240,240,0.9) !important ;
}
Content CSS:
body {
padding-top: 120px;
}