Sticky Topbar

[Contourandco]

Hey Guys,

I found a thread on here and tried to use the supplied code to make my “topbar” also sticky, like my menu bar is currently. The code did not work so maybe it wasn’t compatible with pro, i’m not sure. Could you help me out with code to make my topbar sticky on desktop, tablet, and mobile.

Site: http://terracastproducts.com/

[Prasant]

Hello @Contourandco,

Thanks for writing in!

Please add following CSS under Pro > Theme Options > CSS:

header.masthead {
        position: fixed;
        z-index: 999;
        left: 0;
        right: 0;
    }
    
@media only screen and (max-width: 600px) {
    header.masthead + div {
        margin-top: 230px;
    }

}

@media only screen 
and (min-device-width : 661px) 
and (max-device-width : 1024px)  { header.masthead + div {
        margin-top: 220px;
    }}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.