Sticky Header or Menu in Genesis

Adding a sticky header or menu in Genesis using the plugin: Sticky Menu (or Anything!) on Scroll

The Problem

If you have a long scrolling page you might worry that users will not want to scroll back to the navbar at the top of the page. And if they can’t see your navbar they could just leave your site.

Users could press the home button on their keyboard to jump back to the top of the page. But many people don’t know how to do this.

So what do you do?

One good solution is to add a sticky site header or sticky menu that will remain visible no matter how far the user scrolls down the page.

Yikes! won’t that involve loads of code and complicated stuff?

Not if you use a plugin with a fun if somewhat bizarre name…
Sticky Menu (or Anything!) on Scroll

What do you have to do? Just…

Install the plugin
Paste in a selector such as…
.site-header
.nav-primary
.nav-secondary

If you don’t want the menu to be sticky on small screens type a size in the box that says…

Do not stick element when screen smaller than: (optional)
I use 1024 or 651.

Test the Dynamic Mode setting by ticking or un-tick the box.
Dynamic Mode:

Then test your site thoroughly

Pay special attention to see if the menu or header is now sticky.
If your menu has drop down links, test them.

Sticky Menu (or Anything!) Settings

Some useful selectors to try in the Sticky Element: box…

.site-header
.nav-primary
.nav-secondary

If you don’t want the element to be sticky on mobiles and tablets type a size in the box that says…

Do not stick element when screen smaller than:
The recommended setting is 651. But I would recommend a larger size of 1024.

See through menus in Foodie Pro

It’s possible that your menu color is transparent. If you use Foodie Pro you can set your own color, but if you use #ffffff in Foodie Pro the menu will be transparent. Not white. So make the color very slightly off white. E.G: #fcfcfc