How to Make Any WordPress Menu Sticky on Scroll using CSS

I hate it when websites don’t have sticky menus. Using just a few lines of CSS you can make a sticky fixed menu. I’ve included code and samples below.

I am current’y using the Velux WordPress theme based on Primer by GoDaddy, and in general it’s really quite nice (non sponsored). There is ONE MAJOR pet peeve I do have about it though.

The theme does not have a Sticky WordPress Menu with CSS. What does this mean? It means when you scroll down the page the header disappears (see example below)

Nathaniel Kam - Menu Initial Load
Menu is visible at the top of the page in the wordpress “header”
Nathaniel Kam - Menu After Scroll
Half way into the post there is no way for the user to navigate 🙁

Why Your Menu Should Be Sticky

Today’s websites and blogs especially are TALL experiences. This means there is a lot of scrolling required to see all the content (especially on blogs). If you have ever loaded a page on a mobile device, you will notice this problem can triple or quadruple based on how their responsive elements are setup.

As a user, it is VERY frustrating to be midway down a page and not be able to navigate to other parts of the website. As a business, if you don’t have an immediately visible CTA (call to action) at the moment a user is making a buy decision, you are putting yourself at a disadvantage for a conversion.

This is where sticky menus come in. When a menu is sticky, it remains at the top of the website so a user never loses their navigation control.

By now, you have likely noticed that my menu does stick to the top of the page. That is because I added the Sticky WordPress Menu with CSS myself. Example below:

Nathaniel Kam - Sticky Menu Initial Load
When the page loads the menu and header are at the top
Nathaniel Kam - Sticky Menu After Scroll
When scrolling down the menu is still at the top 🙂

I do not know why the option for stick menus is not just a default part of the WordPress framework or design standard for theme makers. If you work for one of the big theme publishers and know why sticky menus are not the default, I’d love to hear what the reason is.

Menu Design Considerations

Your requirements may vary, but for me I wanted the following in my sticky fixed menu solution:

  1. Requirements:
    1. Easy to implement
    2. Ensures user can always navigate
    3. Works on mobile
    4. Works on desktop
  2. Bonus:
    1. Reduced menu size on mobile
    2. Works on tablet – (we’ll go into more detail on why this is a problem in most WordPress themes)

Options for Sticky WordPress Menu CSS + JS + HTML

There are a few common options for sticky menus out there. For this site, I have opted for the most common that I have observed. As you can see when scrolling, the entire header of my site stays in place. This is by far the easiest to implement, but is by no ways the only way to maintain user navigation on scroll.

Multiple Menu Styles and Triggers

An alternative approach to a sticky header is a 2nd menu element or style after the initial scroll from page load. You can see this type on my wedding photography website.

On initial load the menu has more height to it (see below):

Nathaniel Kam Photography - Menu Initial Load
On initial load the menu is at the top of the page

Once you start scrolling, the white space compresses down so the header takes up less space. This is especially useful on landscape mobile devices (see below).

Nathaniel Kam Photography - Menu After Scroll
Once you scroll the menu shrinks

While I do think this is maybe my favorite option, it is not the easiest, which is what this post is all about. This requires either some JS or twice the HTML / CSS to pull off.

The BootSrap Burger Menu

This is the default mobile menu in many responsive websites (because Bootstrap is the most popular responsive framework). So, either your website uses Bootstrap or was inspired by its ubiquity.

NK - Bootstrap Burger
The 3 lines make a”burger” shape and represent a stack of items

In Velux we have this menu for mobile responsive as well, but guess what? It doesn’t stick by default either!

I should also note that this implementation is actually the multiple menus / style with triggers taken to a more extreme level, as there are two completely separate UI’s in the code.

The Floating Menu Button

The final common menu UI is a floating menu. To see a tutorial on how to create one of these you can check out this tutorial on Medium.

Floating Menu
The floating menu is basically a button or symbol on the screen that unfolds menu options. Credit:

I actually think these floating menus make a ton of sense in mobile apps, as they put the interface right where the user’s fingers will be. But, they have perhaps the highest implementation cost to put in. This is definitely harder than what we are going to propose.

How to Make a Sticky WordPress Menu with CSS

For Velux, this took me 2 classes and 8 lines of CSS including brace formatting.

  1. Get the name of the header class or id, in Velux this is #masthead
    1. Right click on the blank space BEHIND your menu and Inspect Element. The whole bar will highlight when you have found the correct element.
  2. In your theme’s custom CSS, add a new class or id hook for the header you found and set the position to fixed with width 100% and top 0px.
    1. In CSS ids use a # prefix and classes use a . prefix
  3. Make sure no content falls “behind” the menu. Add a class .site-content and give it padding on top (how ever big your menu header is). In our case, it was 125 px.
  4. Save your customer CSS, purge all cache, and refresh
  position: fixed; /* This decouples the menu from the scroll bar */
  width: 100%; /* This ensures your header spans the whole screen */
  top: 0px; /* This ensures the menu is stuck to the TOP of your screen */

  padding-top: 125px; /* puts white space behind the menu so content doesn't fall behind it */

Now you have a Sticky WordPress Menu with CSS! With those few lines of CSS, you will have a sticky fixed menu on your site that gives users access to navigation no matter how long your posts are.

Tablet and Mobile Landscape Complications

Tablet and landscape mobile will generally not be perfect with this basic setup. At least they are not in Velux and in most bootstrap themes I have used – they have the same issue. This issue happens because on tablet size screens the CSS is still set to stack content rather than replace it with the burger.

Nathaniel Kam - Sticky Menu Tablet Issue
On tablet, widths the menu stacks because the CSS breakpoint to switch to the burger menu is too high.
Nathaniel Kam - Sticky Menu Mobile Issue
On Mobile Landscape it is even worse

The fix for this is to change the breakpoint for tablet to also use the burger menu. This requires looking up CSS hooks and making a child theme to deploy for scale and future updates. This process is currently outside the scope of this article.

For Velux specifically you will be changing all entries in the menu section of 40.063em to 60.063em.

Still Having trouble?

Are you still having trouble with getting your WordPress menu to stick? Let me know so I can update this post with details on your use case.

How to Make Any Wordpress Menu Sticky on Scroll using CSS
Article Name
How to Make Any Wordpress Menu Sticky on Scroll using CSS
Learn how to make a sticky wordpress menu with a few lines of CSS. I hate it when websites don't have sticky menus.Code and samples provided.
Publisher Name
Nathaniel Kam | On Technology and Operations
Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *