How to Make a Fixed Menu with CSS

How to Make a Fixed Menu with CSS

Today I am going to share a super quick tutorial on how to make a fixed menu using CSS and HTML. We won’t dig into JavaScript or frameworks with this one. Instead, we’re keeping it simple with just the basic building blocks of the web.

Surely, you have seen plenty of websites using this effect before. The navigation or menu bar sticks to the top of the page, while the rest of the content scrolls past.

This is what we’re going for. See how the menu bar stays glued to the top of the page as you scroll? Let’s see how to make one ourselves!

Setting up your HTML for the Fixed Menu

We’ll get started on our fixed menu with CSS and HTML, we’ll start with the skeleton of the page: creating our HTML. Make sure you use the proper semantic tags and follow HTML best practices like following the proper structure for your document. We won’t worry too much about the specifics at this point. Just make sure you have enough text or content to allow scrolling.

Make sure to link your CSS style sheets if you are using a text editor or IDE. In this case, we’re just using Codepen.io to create the prototype, so there is no need for anything extra.

Here is the HTML file so far:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">Blog</a>
  <a href="#contact">About Us</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <p>Add your text here! Make sure to place enough content to scroll vertically</p>
</div>

As you can see, we have a <div> with a class of “navbar” and several anchor <a> tags inside. This will be our fixed menu. Nothing happens yet, but that is what the CSS is for. 

Speaking of CSS, let’s start adding some style!

Creating the CSS for your Fixed Menu

Now for the fun part. All you need to do to make your menu bar “fixed” in place, is add one simple attribute. Here is the first part of our CSS:

* {
  margin: 0 auto; /*prevents unwanted margins*/
}
.navbar {
  overflow: hidden;
  background-color: red;
  position: fixed; /* Set the menu bar to a fixed position */
  top: 0; /* Necessary to make the menu bar stick to the top */
  width: 100%; /* Makes the menu bar full width */
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
}

Adding the “position:fixed” attribute to your navbar class is the key ingredient. Without this, your menu bar will be whatever the default setting is. Additionally, to set the menu bar to stick to the top of your page, you must give it a top attribute of “0.” Conversely, if you want your menu bar to stick to the bottom instead, just use the “bottom: 0” attribute instead.

As you can see, we also have a pleasant box-shadow to give the illusion that the menu bar is closer than the content.

Let’s check out the rest of the CSS. These are the less important components. So feel free to style however you please:

/* Style your navbar links */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on mouse-over */
.navbar a:hover {
  background: pink;
  color: black;
}

.main {
  margin-top: 60px; /* Add a top margin so you content is not covered by navbar */
}

And that’s it! That’s all you have to do to create a fixed menu with CSS. 

Final Thoughts: How to Make a Fixed Menu with CSS

That was pretty easy, right? If you want a more interactive solution, check out how to make a sticky header with JavaScript. The added power of JavaScript really brings your page to life.

Like you, I am a life-long learner and student of web development. If you want to know where I learned how to make this, check out W3Schools. They have a tons of awesome free stuff to help you learn!

If you think that was fun or need any help, please drop a comment below. I hope you enjoy and, most importantly, have fun!

Leave a Reply