Skip to content

MICA-MNI/MICA-MNI.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e837cfb · Mar 4, 2025
Jan 15, 2017
Mar 4, 2025
Feb 13, 2018
Aug 19, 2020
Sep 3, 2020
Mar 11, 2017
Jun 4, 2019
Nov 15, 2017
Mar 4, 2025
Aug 19, 2020
May 17, 2016
May 17, 2016
Jun 9, 2016
Jun 4, 2019
Nov 12, 2023
Mar 4, 2025
Jul 4, 2019
Feb 19, 2019
May 17, 2016
Feb 5, 2019
Apr 19, 2017

Repository files navigation

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

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.