How to build a fixed menu in 3 easy steps

by Jean. 16 Comments -

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.

The HTML

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>
	</ul>
</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 CSS

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.

#fixmenu{
	width: 1122px;
	height:30px;
	margin-left:-48px;
	padding:5px 48px;
	position:fixed;
	top:0;
	background:#7eb7d9;
	display:none;
}
	
.menu-fixed{
	width: 260px;
	float: right;
	text-align: right;
	padding:4px 0 5px 0;
	list-style-type:none;
}

.menu-fixed li{ display:inline; }

.menu-fixed a{
	ont-size:0.9em;
	color:#fff; 
	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() {
	$(window).scroll(function(){
		if(document.body.scrollTop > 300)
			$('#fixmenu').fadeIn( "slow", function() { });
		else	
			$('#fixmenu').fadeOut( "slow", function() { });
	});

	$('a#srolltotop').click(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.

  • http://www.fancyclone.net suganya

    Everyone loves it when people come together and share opinions. Great blog, continue the good work!

  • http://lilly.io LillyDevShop

    Great article! One thing to keep in mind is that Mobile Safari (iOS) is quirky with fixed positioning in that it will only allow one fixed position element on the page. If you have more than one then it will freeze the scrolling. The best solution is usually to change the nav bar to relative positioning at that point as a fixed menu will hide valuable screen space on a phone.

    All and all a great article though :) Great work!

    Brian – http://lilly.io

  • http://www.3wedge.com/services Web Design Services

    I was looking for fixed menu, this blog helped me alot. Thanks for sharing such an informative post.

  • http://www.results-results.com/ Hina Khan

    Dear you post this very well nice information. You can also check my Result website.

    How to build a fixed menu in 3 easy steps

  • http://www.arttechint.com/ Suraj Rai

    Great post, you really share good steps about build a fixed menu. It helped me to increase my knowledge about menu management. This post is really nice and helpful to all developers. Thank to share this useful information with us.

  • Angel Pradhan
  • Vectorial Graphics

    Thanks for the code. Also, you can relate your code with this vectorial graphics.

  • sharmapoo

    Very informative blog. It is very helpful for students like me. I am a learner of website design and this blog is very informative for me. mfcs.com.au.

  • http://jackmarchant.com jackmarchant

    Great post, I liked the code snippets to give a bit more information.
    Wouldn’t it be better, however, to use css3 animations for the animation?

  • neha

    Yaaa….. this is great post, simple code to build menus in small steps……… to get more simpler ideas regarding css3, javascript, jquery or to get training regarding this, visit this website (web9cloud). This is really amazing, i am sure you will get best ideas regarding php and make your concepts clear. web9 cloud provides IT consulting services to its customers. Web9Cloud envisioned and pioneered the adoption of the flexible business practices that enable companies to operate more efficiently and produce more value.

  • JustinRoush

    Very helpful tricks.

  • fp.harikumar

    Wow. nice trick.. thanks for sharing WAN Optimization Technology

  • Dani Aish

    hi! thanks really nice and very informative i found it this article link from google search , simple code and can tel us step by step so easy

  • http://www.descontosensacional.com Henry Guerrar

    Awesome, I realy love this content!!!
    Desconto Netshoes

  • http://xtramile.co.in krishna

    Great Post.Thanks for sharing your informative post with us.

  • http://flexwebdevelopment.com.au/ Flexwebdevelopment

    This may help for you, building your website or Mobile Apps http://flexwebdevelopment.com.au/ they’re a team of highly skilled, mature and experienced Developers build reliable, robust, web-based functionality using HTML5, PHP, CSS3, .Net, JavaScript, MySQL as well as iPhone and Android languages.