Fixed Navigation Bar

Source code for the implementation of the fixed navigation bar design pattern. This fixed navigation bar only requires HTML and CSS to use. A basic CSS-only responsive menu housed within the fixed bar is also included, just as a proof-of-concept.

This is the companion source code for a Six Revisions tutorial called How to Create a Fixed Navigation Bar.

View Demo

Read The Tutorial

Explanation

• fixed-navigation-bar.html markup for the fixed navigation bar - it's a <nav> element with a class of .fixed-nav-bar.
• fixed-navigation-bar.css style rules for the fixed navigation bar.
• /assets directory contains images and a stylesheet used for the demo page. Files in this directory are not required for the fixed navigation bar to work.
• /assets/base.css basic CSS (reset, layout, etc.) used for the demo page, as well as the CSS for the responsive menu. These style rules are not required for the fixed navigation bar to function; they are page-specific style rules.