Make the Mobile Responsive Version of Nav Menu Sticky in Magazine Pro

[ncosgrov58]

I am setting up a new site using Magazine Pro. The PC view of the site is perfect, no change needed. When using the mobile view (which in general is great) I would like to make the menu sticky so it stays present as you scroll (key since by definition the mobile theme forces a vertical layout which creates a need to scroll). Hope someone has tackled this, would rather avoid a plugin if possible. Any help appreciated

[ᴅᴀᴠɪᴅ]

You'd need something like this. This would work on the Magazine Pro Theme out the box, I'm not sure what customizations you have made without a link, so you may have to change the px amounts a bit.

@media only screen and (max-width: 840px) {

    .menu-toggle {
        position: fixed;
        top: 0;
    }
    
    .site-container {
        margin-top: 52px; /* This needs to be same px value as the height as the responsive menu button */
    }
    
    nav.genesis-responsive-menu {
        position: fixed;
        top: 52px;
    }
}

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[ncosgrov58]

Thanks Dave, that worked perfect. All the Best

[Author]

Posts