Skip to Content

Adding a Transitioning Nav Using CSS


A transitioning sticky navigation allows you to display two different navigations based on where the viewer is on the page.

A transitioning sticky navigation allows you to display two different navigations based on where the viewer is on the page. This article gives you the code to add a sticky transitioning navigation to your website which you can customize to meet your needs.

Below is the HTML, CSS, and JavaScript required to add a transitioning sticky nav to your website.

Step 1 - Add the HTML below to the top of your web page.

Step 2 - Add the CSS below to the main stylesheet of your website.

Step 3 - Add the JavaScript below to a file called nav.js

Step 4 - Add the includes below to the pages where your nav will live


Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev
Solodev Logo

©2024 Solodev. All rights reserved worldwide.