WordPress sticky menu bar

Are Sticky Menus the Way of the Future for Web Design?

When you are logged into WordPress, there is a “permanent” grey menu bar at the top of the screen that stays at the top of the browser window no matter how much you scroll down. In the left corner there is a button that allows you to quickly log into the admin area or return to the website.

I often found myself clicking that button with the intention of going back to the home page of the site. That worked fine when I was in the admin area, but when I was in the site itself, it would send me back to the admin area.  My brain wanted so badly to have a button always available to get me back to the front page of the site that I would often hit this button when I was scrolled down somewhere in the site, only to be dumped into the admin area.

That got me thinking: There should be a way to get back to the home page of a site no matter how far down you’ve scrolled, a.k.a, the Sticky Menu!

I quickly coded up an example of what I wanted and came up with this demo. (Note, don’t copy this code – not because I am selfish, but because there are better ways to do it – keep reading).

Real-World Examples

Was I the only one thinking this? I decided to look at some of the world’s most popular sites to see if I was crazy.

I went to Facebook first. Hmmm.. That has a permanent blue bar at the top of the screen that allows you to go back to the home page and do a few other things. It’s there no matter how far down you scroll. So maybe I wasn’t the only one wanting this!

I visited some Google sites. YouTube: no, that has a menu that scrolls off screen. But Google Analytics – aha! That has a menu bar that scrolls up but stops at the top of the screen! And, with a big Home icon in the upper left corner! That is exactly what I wanted!

The first screenshot shows the orange menu bar as seen when you land on the site.  On the right is a screenshot of the page when you’ve scrolled down.  Notice the Google logo disappears but the orange menu bar stays at the top.

Google Analytics sticky menu
Google Analytics showing orange menu bar
Google Analytics sticky menu scrolled
Google Analytics partially scrolled showing sticky menu bar

 

Research

Okay, if Facebook and Google were doing this, maybe I wasn’t crazy. But, was there any real research on this? The answer is “yes”. I found an excellent article in Smashing Magazine by Hyrum Denney entitled “Sticky Menus are Quicker to Navigate”. Hyrum did a A/B study and came to these two conclusions:

  1. Sticky menus are 22% quicker to navigate.
  2. 100% of end users preferred sticky menus without knowing why.

You can read the article itself for the details. This seemed to confirm my instinctive behavior. Having a permanent, or “sticky”, bar at the top of a site was more efficient!

Implementation

Hyrum lists some ways to achieve sticky menus towards the end of his article, using CSS or JavaScript. (Check those methods out, rather than using my hastily-written code. Their methods are better.)

A sticky menu at the top of the site is pretty easy to implement and can be done with CSS only. A sticky menu that is a bit further down on the page but sticks to the top when the user scrolls down requires JavaScript, but it’s not too bad.

I thought about how I’d implement sticky menus in some of my WordPress sites. Some of them would be tricky because they were responsive, but it wouldn’t be too difficult.

I Finally Did It!

I recently tried out the Foundation 5 framework utilizing a starter theme for WordPress.  That framework has provisions for a sticky menu, so I tried it out on this site, lalindyhop.com!

After using it on a real site, I’m really liking it, and I’ve gotten positive feedback from users!

The Future of Websites?

I haven’t seen a lot of sticky menus in other WordPress themes yet. They are currently being used by only the most cutting-edge companies. But I believe they are the way of the future. What do you think?

2 thoughts on “Are Sticky Menus the Way of the Future for Web Design?

Leave a Comment or Ask a Question