24 Feb 2014
Fixed menus in web design – love them or hate them they are trending right now. If you don’t think you know about fixed menus you have definitely seen them and might have even been irritated by them. They are the menus on a website that stick in one position no matter where you scroll too. We have all seen an increase in these for some time now but even more so since Twitter jumped on board – and I personally like that. What I don’t like is when they are done incorrectly! Here’s my tips on how to do them right.
Don’t have them too high
I once worked on a site that had a fixed menu so large it looked as if we were viewing the site through some kind of letterbox (Note my earlier can be irritating comment!). Try keeping just what is essential on there, we don’t always need a huge logo above what we are reading now do we?
Do keep it at the top
You will have to have far more creativity than anyone I’ve ever met to have the menu fixed through the middle of the screen. Ok, obviously that would be a bit stupid but I’ve seen them at the bottom of the page – like a fixed footer menu – and that just didn’t really work. It should work in theory but when you are on site, where you are scrolling, this is going to be off-putting to 99% of people who visit it. So it’s a no.
Don’t keep it fixed for mobiles
A lot of people do this and I have no idea why! Not sure if anyone has noticed but personally I find it very difficult to browse the internet on my mobile phone. It has a small screen and all controls are done by touching the screen. You touch the screen to scroll, select and type. Whenever I visit these sites I try to scroll down and accidently select a new page from the fixed menu. After a few minutes of being careful not to click on something I give up and find another site. That is something you don’t want to ever happen with your website…..
Do make it a little bit transparent
My previous point about the royal mail fan site (letterbox effect) comes back here. This might not be as much of a commandment as the rest of my do’s and don’ts but I often find that setting the opacity to about 95% makes the content look less cluttered.
Don’t make it snap to fixed positioning
If you have your menu placed below the header and you’re using JavaScript to apply fixed positioning when the page scrolls to a certain point, make it fade in or stick when it gets to the top. I’ve seen sites that look like they are performing some sort of computer glitch when the positing is applied and it certainly doesn’t look very professional. I think this will be a good year for web design – let’s make it a nice user experience people!
Coding tips
If you are going to be applying the fixed menu through JavaScript (jQuery) you can try adding a class to the menu’s container of position: fixed; top: 0; let: 0; I mention this method because you can then take off the fixed positing for mobile devices by simply using a media query and giving the same class a position as static – think about it 
All in all, these are my Fixed menus tips from your ever-here-to-help Dan. Here endeth the lesson – Happy Monday to one and all.