Simple Responsive Sticky Menu With Pure CSS (Free Download)

Welcome to a tutorial and example on how to create a simple responsive sticky menu with pure CSS. So you need to “fix” a navigation menu at the top of a web page, and make it follow along as the user scrolls down?

That covers the quick basics, but how can we improve on it? Let us walk through an example in this guide – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Sticky Menu	Useful Bits & Links
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

STEP 1) THE HTML

<!-- (A) HEADER -->
<header id="page-header">MY SITE</header>
 
<!-- (B) STICKY MENU -->
<nav id="sticky-menu">
  <a href="#">
    <i>&#9729;</i> <span>One</span>
  </a>
  <a href="#">
    <i>&#9730;</i> <span>Two</span>
  </a>
  <a href="#">
    <i>&#9742;</i> <span>Three</span>
  </a>
  <a href="#">
    <i>&#9752;</i> <span>Four</span>
  </a>
</nav>
 
<!-- (C) CONTENTS -->
<main id="page-contents">CONTENTS</main>

What we are interested in here is <nav id="sticky-menu">, should be pretty self-explanatory.

• Just sandwich the <a> links within the navigation menu.
• Additionally, I have used <i> as the menu icon, and <span> as the menu text here. Feel free to use just “plain text” if you don’t want all the bells and whistles.

 

 

STEP 2) THE CSS

/* (A) STICKY MENU */
#sticky-menu {
  /* (A1) STICK TO TOP ON SCROLL */
  position: sticky;
  top: 0; left: 0;
 
  /* (A2) LAYOUT + BACKGROUND */
  display: flex;
  background: #3c3c3c;
}

/* (B) MENU ITEMS */
#sticky-menu a {
  /* (B1) AUTO WIDTH */
  width: 100%;
  padding: 10px 0;
 
  /* (B2) TEXT */
  color: #fff;
  text-decoration: none;
  text-align: center;
}
 
/* (B3) ON HOVER */
#sticky-menu a:hover { background: #691717; }
 
/* (B4) MENU ITEM ICONS */
#sticky-menu i {
  text-decoration: none;
  font-style: normal;
}

/* (X) DOES NOT MATTER - FOR DEMO */
html, body {
  font-family: arial, sans-serif;
  padding: 0;
  margin: 0;
}
#page-header, #page-contents { padding: 10px; }
#page-header {
  font-weight: bold;
  font-size: 2em;
  background: #c6efff;
}
#page-contents {
  height: 2000px;
  background: #ffc7c7;
}

This may seem rather confusing to beginners, but the main mechanics here are:

1. As in the introduction, position: sticky; top: 0; left: 0; is actually all it takes to create a sticky menu. Use position: fixed if you want the menu to be “always on top”.
2. Laying out the menu items is painless with modern CSS as well, setting display: flex will automatically lay the menu items in a horizontal manner.

Actually, that’s all. The rest is pretty much just cosmetics.

 

 

STEP 3) RESPONSIVE SUPPORT

/* (C) ON SMALL SCREENS */
@media all and (max-width: 768px) {
  /* (C1) BREAK TEXT INTO NEXT LINE */
  #sticky-menu a span { display: block; }
 
  /* (C2) BIG ICON */
  #sticky-menu i { font-size: 1.7em; }
}

Supporting mobile devices and small screens does not have to be difficult. All we are doing here is breaking up the menu text into a new row, and setting a bigger icon – This will create mobile-friendly big menu buttons.

 

 

 

LINKS & REFERENCES

• For a complete list of HTML symbols that you can use for your menu, check out Toptal.
• CSS Position – MDN
• Responsive Hamburger Menu – Code Boxx

 

INFOGRAPHIC CHEAT SHEET