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.
fixed-navigation-bar.htmlmarkup for the fixed navigation bar - it's a
<nav>element with a class of
fixed-navigation-bar.cssstyle rules for the fixed navigation bar.
/assetsdirectory 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.cssbasic 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.