Sticky Mobile Navgation on Genesis Cafe Pro

Sticky Mobile Navgation on Genesis Cafe Pro

Yesterday on the Genesis Support Forum, a user asked if the navigation menu could remain fixed (sticky) while in viewing the site on smaller screens.

This can easily be done just within the theme’s style.css file.

By default, the navigation position is set to relative while in the screen size is less than 900px.  By setting the position to fixed and top to 0, the menu will remain at the top of the screen as it does on the desktop.

This forum user asked for this solution specifically for the Cafe Pro Theme, but the logic could also be used with other Genesis 2.0 themes.

Published by


Product developer at WPEngine and runner from Hampshire, Illinois. I work with php a lot; Spending most of my time digging into source code to see how it all works. You can find me on Twitter @rfmeier.

Leave a Reply

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