Currently, I am in the process of constructing my website using Bootstrap and my goal is to ensure that the header and navigation bar remain fixed at the top of the page while the content below scrolls underneath. While I am aware that it is possible to fix a navbar to the top with Bootstrap, I am wondering if there is a way to also fix the jumbotron to the top.
The code I have so far looks like this:
<div class="jumbotron">
<img class="jumbotron-img-top" src="images/headerwithtag.png">
</div>
<nav class="navbar">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
BOOKS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Branding Sutra</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
</ul>
</nav>
As for the CSS associated with it, here is what I have:
.jumbotron {
background-color: white;
}
.jumbotron-img-top {
width:100%;
}
.navbar {
background-image: url("images/navbarbgnew.png");
background-size: cover;
margin: -30px 0 15px 0;
}
I am uncertain about what modifications are needed to achieve the desired outcome of fixing both elements at the top of the page while ensuring they fill the entire screen.