<nav>Navigation</nav>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
nav {
block-size: 5rem;
background: red;
}
@media (min-height: 30rem) {
nav {
background: orange;
position: sticky;
top: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.