<div class="site">
<nav class="nav">
<div class="nav__title">Site Title</div>
<ul class="nav__list">
<li class="nav__item">Services</li>
<li class="nav__item">About Us</li>
<li class="nav__item">Blog</li>
</ul>
</nav>
<div class="hero">
<h1>Position Sticky Subnav</h1>
</div>
<section class="section">
<h2>A Section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
</section>
<div class="subnav">
<div class="subnav__container">
<div class="subnav__title">
<h1>Sub Nav</h1>
</div>
<ul class="subnav__list">
<li class="subnav__item">Section 1</li>
<li class="subnav__item">Section 2</li>
<li class="subnav__item">Section 3</li>
</ul>
</div>
</div>
<section class="section">
<h2>A Section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
</section>
<section class="section">
<h2>A Section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
</section>
<section class="section">
<h2>A Section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
</section>
<section class="section">
<h2>A Section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
</section>
<footer>
<p>No Copyright 1996</p>
</footer>
</div>
// IMPORTANT
.nav {
position: sticky;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
top: 0;
}
.subnav {
position: sticky;
bottom: 0;
top: 60px; // prevent covering main nav
}
// DEMO LAYOUT CODE
.nav {
background: #42A5F5;
&__title {
margin: 0px 30px;
}
&__item {
display: inline-block;
margin: 0px 30px;
}
}
.hero {
display: grid;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #BBDEFB;
h1 {
font-size: 6em;
margin: 0 90px;
text-align: center;
}
}
.subnav {
background: #fff;
border-bottom: 1px solid #222;
&__container {
align-items: baseline;
display: flex;
margin: 0 60px;
padding: 15px 0;
}
&__title {
font-size: 1.25em;
}
&__list {
margin: 0 15px;
}
&__item {
display: inline-block;
margin: 0 8px;
padding: 5px;
}
}
.section {
max-width: 900px;
margin: 60px auto;
padding: 90px 30px;
background-color: #FFCDD2;
text-align: center;
h2 {
font-size: 3em;
margin-bottom: 15px;
}
p {
line-height: 1.625em;
margin: 0 auto;
max-width: 480px;
}
}
footer {
text-align: center;
}
View Compiled
// look up ^^
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.