[Bastian AParticipant]

Hi there,

I set my nav bar to be sticky on mobile with a media query and this inside:

.x-navbar-fixed-top {
   position: fixed !important;
   margin-bottom: 50px;
}

As a result, my page content jumps up (about the height of the navbar or maybe topbar), when the navbar hits the top of the viewport on scroll.
I could encounter that by adding top-margin to the x-main container when nav gets sticky, but I cant figure out, where to place this conditional code. I guess there is some javascript you use, to add that -fixed-top class to the nav?

http://www.schimmel.kruell-architekten.de/wordpress/

Thanks in advance!

[ChristianModerator]

Hey there,

Please replace that code with

@media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
    top: 30px
}
}

Put it in Appearance > Customize > Custom > Global CSS

Thanks.

[Bastian AParticipant]

Hey,

Thanks for your reply!
Unfortunately your snippet offsets my navbar by 30px from the top, instead of pushing the main content down.
Any suggestions?

[ChristianModerator]

Sorry, please change again with

@media (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 56px !important;
}
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
}
}

Thanks.

[Bastian AParticipant]

Perfect, that works like a charm!

Thank you, Christian.

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts