Over a million developers have joined DZone.

How to build a fixed menu in 3 easy steps

DZone's Guide to

How to build a fixed menu in 3 easy steps

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

Fixed menus are a definitive web design trend of 2014. They look good, and they are also super useful for visitors. Today, I’m showing you how you can create a lightweight, functional and beautiful fixed menu for your website or WordPress blog.


Let’s start with the basis: The HTML. Place this code just after the opening <body> tag of your html document. If you’re applying this tutorial to a WordPress blog, this code should go into your header.php file.

<div id="fixmenu">
	<a href="http://www.yoursite.com"><img src="path/to/yourlogo.png" alt="" /></a>
	<ul class="menu-fixed">
		<li><a href="http://www.yoursite.com">Home</a></li>
		<li><a href="#header" id="srolltotop">Top</a></li>
</div><!-- #fixmenu -->

As you can see, we created a container (#fixmenu), a site logo and link, as well as a <ul> list containing our menu items. Feel free to add more menu items to fit your needs.


The second step is the CSS. Let’s make a beautiful fixed menu! Paste the code below in your style.css (or whatever it is named) file.

	width: 1122px;
	padding:5px 48px;
	width: 260px;
	float: right;
	text-align: right;
	padding:4px 0 5px 0;

.menu-fixed li{ display:inline; }

.menu-fixed a{
	text-shadow:1px 1px #5E8BC5;
	padding:0 0 0 10px;

This is the exact CSS code I used on CatsWhoCode, so maybe you’ll have to adapt it a bit. If you have a look at your html document right now, nothing will show up. Why? because of the display:none; property that I added to the #fixmenu container. This is simply because we only want our fixed menu to be visible when the regular header menu can’t be seen due to scrolling.

The jQuery

So how do we detect when the page have been scrolled enough so the header of the site isn’t visible anymore? We’re going to use jQuery, of course. Paste this code in the bottom of your html document; in the footer.php file if you’re applying this to a WordPress blog. Of course, make sure you have included the jQuery framework before this code.

$(document).ready(function() {
		if(document.body.scrollTop > 300)
			$('#fixmenu').fadeIn( "slow", function() { });
			$('#fixmenu').fadeOut( "slow", function() { });

		$('html, body').animate({scrollTop:0}, 100);
		return false;

What this code do is pretty simple: On line 3, we detect if the document has been scrolled more than 300 pixels from the top. If yes, the fadeIn() jQuery function is called in order to display the fixed menu. On the other hand, the fadeOut() function is used to hide the menu when the top of the document is visible.

On line 9, I added a bit of code to detect when the #scrolltop link is activated. A click will smooth scroll to top of the document.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}