HTML/CSS - Two divs with single gradient background but one sticky element

user_10539983 0
Viewed 302

I have a problem which is frustrating me somewhat. The scenario is:

I have two divs. Top div is a banner (containing logo only). Bottom div is the navbar, containing some icons as links and a dropdown.

I want the two following things:

  1. have a consistent linear gradient background over the two divs
  2. the bottom, navbar div to have position:sticky, top:0, so that it remains at the top of the page when scrolling.

I can achieve both of the above independently, but not concurrently. Is there anyway to achieve this?

A simplified version of the CSS and HTML, with the version that has the sticky navbar, but the gradient is per div, not starting in one div and finishing in the other:

#banner,
.navbar {
  background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
  padding: 5px 5px 5px 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 with the opposite:

header {
  background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
  padding: 5px 5px 5px 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>

linear-gradients css html
1 Answers

You can consider a pseudo-element within the navbar where you apply the gradient coloration and you overflow it from the top so it cover the banner. You simply need to adjust the top value depending on your styles.

#banner {
  padding: 5px 5px 5px 5px;
  position:relative;
  z-index:1;
}

.navbar {
  position: sticky;
  padding: 5px 5px 5px 5px;
  top: 0;
}
.navbar:before {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  bottom:0;
  top:-100px;
    background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}


.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>

user_86203330
Related