Sticky Masthead

[jim_honea]

I would like the entire masthead to stay stuck (includes topbar and main menu bar). Using the JQuery code that I have found in past posts does not seem to work with the css I have in my site. Can you help me?

[thai]

Hi @jim_honea,

That could be achieved with the custom CSS. Please switch the style of header to static top:

Then add the following CSS under Theme Options > CSS:

header.masthead {
    position: fixed !important;
    width: 100%;
    top: 0;
    z-index: 9999;
}

@media (min-width: 768px){
    .admin-bar header.masthead {
        top: 32px;
    }
}

div#top {
    padding-top: 173px;
}

The 173px should be your masthead’s height.

Hope it helps

[jim_honea]

Thank you.

I also have a notification bar that sits on top of the site (41px). This code locks the masthead to the top of the page underneath my notification bar. Do you know how to start it under the notification bar? Essentially 41px down?

[ruenel]

Hello @jim_honea,

If that is the case, then you can update the code and change the top position:

header.masthead {
    position: fixed !important;
    width: 100%;
    top: 41;
    z-index: 9999;
}

@media (min-width: 768px){
    .admin-bar header.masthead {
        top: 73px;
    }
}

div#top {
    padding-top: 173px;
}

Hope this helps.