Source code for implementing a simple fixed-position/"sticky" navigation bar
CSS
Switch branches/tags
Nothing to show
Clone or download
sixrevisions
sixrevisions Initial commit
Latest commit 5df49da Aug 13, 2014
Permalink
Failed to load latest commit information.
assets Initial commit Aug 13, 2014
LICENSE Initial commit Aug 13, 2014
README.md Initial commit Aug 13, 2014
fixed-navigation-bar.css Initial commit Aug 13, 2014
fixed-navigation-bar.html Initial commit Aug 13, 2014

README.md

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.

Live demo page

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.