How do we make menu fixed when using mobile

hitched

I have pinned my header and used a collapse menu option in my header but when on mobile the menu scrolls up.. How can I fix the menu so it stays fixed on mobile?

Hikin' Mike

Add this to your theme's CSS:

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

    .sm-user-ui .sm-page-widget-nav {
        background: #fff;
        position: fixed;
        top: 0;
        width: 100%;
        }

}   

hitched

hi Mike it sort of works. The block hides behind the image. the text overlaps..

hitchedandhatched.com/Front

hitched

can I change the menu orientation such as on smugmug landing page? putting it in a collapse state in the right corner..

I'm just wondering about the design on the landing page on smugmug.com and can this be used on my site ?

Hikin' Mike

@hitched said:
hi Mike it sort of works. The block hides behind the image. the text overlaps..



hitchedandhatched.com/Front

It needed a z-index:

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

    .sm-user-ui .sm-page-widget-nav {
        background: #fff;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        }

}   

hitched

Perfect it works...thank you for this..

picomoments

can't seem to get it to work on mine... www.picomoments.com/

anyone got any suggestions?

Hikin' Mike

@picomoments said:
can't seem to get it to work on mine... www.picomoments.com/

anyone got any suggestions?

That's because his site used a top-menu. You have a left menu. Add this to your theme's site-wide custom CSS section:

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

    .sm-user-ui .sm-page-layout-region-left {
        position:fixed !important;
        z-index: 100;
        top: 0;
    }

}