Freeze navigation bar

[oldgustav (Gary Loch)]

A lot of themes can do this but we are using Elixir Ruby theme and I don’t know whether this is possible. We’d like to be able to freeze the nav bar if possible. Any ideas? This is one of the pages: https://www.greenercamping.org/certificated-campsites. Thanks!

[willwood (William Woodgate)]

Perhaps you mean fixed positioning?

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

You can try this CSS code for your theme:

header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}

Or this as an alternative (an older method and possibly more reliable):

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

body {
    /* Create space for the header bar */
    padding-top: 150px;
}

Take into consideration that your header bar is 150px tall. Therefore you probably do not want it ‘fixed’ at the top of the screen on tablet or mobile devices. It would consume too much space.

So consider putting the above CSS code inside media breakpoints, so it will only take effect above a certain screen width, working on the mobile-first design principle:

@media screen and (min-width: 1000px) {
    /* Put your code here, for screens 1000px and wider */
}

[oldgustav (Gary Loch)]

Thanks Will. The first version works perfectly - I like the way it un-fixes when scrolling. It’s perfect in mobile too. Big thanks! https://www.greenercamping.org/certificated-campsites/