Simple Responsive Sticky Menu With Pure CSS – Free Code 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 it will follow along even if the user scrolls down?

To create a sticky menu, simply set position: sticky on the menu. For example, <nav style="position:sticky; top:0;">

 

That covers the basics, but just how do we do 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.

 

 

REAL QUICK TUTORIAL

 

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.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

STICKY MENU

All right, let us now get started with the simple example of a responsive sticky menu.

 

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;
  /* (A2) LAYOUT + BACKGROUND */
  display: flex;
  background: #3c3c3c;
}

/* (B) MENU ITEMS */
#sticky-menu a {
  /* (B1) AUTO EQUAL LAYOUT */
  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 a lot, but the main mechanics here are:

  • A – Adding #sticky-menu { position: sticky; top: 0; } is actually all it takes to create a sticky menu. Use position: fixed if you want the menu to be “always on top”.
  • B – Laying out the menu items is painless. Since #sticky-menu is set to display: flex, setting each menu item to #sticky-menu a { width: 100%; } will automatically space them out equally.

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 do 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.

 

INFOGRAPHIC CHEAT SHEET

Responsive Sticky Menu With CSS (Click to enlarge)

 

LINKS & REFERENCES

 

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. Required fields are marked *