Sticky Menu and Mobile Menu

Hello.

I used the Customizing panel to set my Menu to sticky. My home page works fine, but my internal pages are not sticky. I believe this was fixed in your update, but I have made several core modifications and do not want to loose my work.

Could you please provide me with code that will make my internal pages sticky. Also, I do not want the menu to be sticky on mobile, so could you please provide additional code so that at break point 768px and below, the menu scrolls.

My site: http://creativew.com/theme

Thank you so much,
Esteban

Dear Esteban,

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

@media only screen and (min-width: 769px){
    .site-header.fixed {
        position: fixed !important;
    }

    .site-header.float-header{
        padding: 5px !important;
    }

    .admin-bar .site-header.float-header {
        top: 32px !important;
    }    
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi E,

Please try following css code to make the top bar sticky:

.site-header.fixed {
    position: fixed !important;
}

Hi Awan,
Using your code makes the menu sticky all the time, on all breakpoints and screen sizes, so not really good for hand held devices with smaller viewports.

Kharis,

Your code works almost perfectly. The problem I see is that on any of my internal pages, the menu is sticky but when you start scrolling, the page “snaps” up. On Safari, the page page opens at the wrong spot on the page. I think will be clear when you visit this link. http://creativew.com/theme/contact-us

Thanks,
Esteban

Dear Esteban,

Thank you for updating me.

Could you please try to change the previous code I suggested to the following?

@media only screen and (min-width: 769px){
    
    .site-header.fixed {
        position: fixed !important;
    }

    .site-header.float-header{
        padding: 5px !important;
    }

    .admin-bar .site-header.float-header {
        top: 32px !important;
    }  
    
    #content > .container{
        margin-top: 100px;
    }
    
    .admin-bar #content > .container{
        margin-top: 132px;
    }    
    
    .home #content > .container,
    .admin-bar .home #content > .container{
       margin-top: 0;
    }    
    
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis