I am currently facing a dilemma that is causing me some frustration. The situation is as follows:
I have two divs on my webpage. The top div consists of a banner with the logo, while the bottom div is the navbar containing icons as links and a dropdown menu.
My goal is to achieve the following:
- Apply a consistent linear gradient background over both divs.
- Make the navbar stick to the top of the page when scrolling by setting its position to sticky with top: 0.
I have managed to accomplish each of these tasks separately, but I'm struggling to make them work together simultaneously. Is there a way to achieve this?
Below is a simplified version of the CSS and HTML code. The first version features the sticky navbar with separate gradient backgrounds for each div:
#banner,
.navbar {
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
padding: 5px;
}
.navbar {
position: sticky;
top: 0;
}
.navbar li {
display: inline;
}
.container {
height: 1000px;
}<div id="banner" class="Container-fluid">
<div class="banner-row">
<h1>Logo!</h1>
</div>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li><a href="/home/"><span>Home</span></a></li>
<li><a href="/about/"><span>About</span></a></li>
<li><a href="/contact/"><span>Contact</span></a></li>
</ul>
</div>
<div class="container body-content"><h1>Content!</h1><p>Stuff to fill a space.</p></div>And here is an alternative approach where the header has a gradient background and the navbar is sticky:
header {
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
padding: 5px;
}
.navbar {
position: sticky;
top: 0;
}
.navbar li {
display: inline;
}
.container {
height: 1000px;
}<header>
<div id="banner" class="Container-fluid">
<div class="banner-row">
<h1>Logo!</h1>
</div>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li><a href="/home/"><span>Home</span></a></li>
<li><a href="/about/"><span>About</span></a></li>
<li><a href="/contact/"><span>Contact</span></a></li>
</ul>
</div>
</header>
<div class="container body-content"><h1>Content!</h1><p>Stuff to fill a space.</p></div>