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?

We can create a simple sticky menu by using position: sticky, for example:

  • <nav style="position:sticky; top:0;">
  • <a href="PAGE">ITEM</a>
  • <a href="PAGE">ITEM</a>
  • </nav>

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

STICKY MENU

All right, let us now get into the simple example of a responsive sticky menu using CSS only.

 

STEP 1) THE HTML

sticky-menu.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

sticky-menu.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

sticky-menu.css
/* (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.

 

 

USEFUL BITS & LINKS

That’s all for the code, and here are a few more extras that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Responsive Sticky Menu With CSS (Click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to create a better website, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.