[Resolved] Sticky Menu Position

[CG Klein]

Ok the hide is working my fault, i can get the spacing.

Thanks a ton!

[CG Klein]

I think i need padding-top for different resolutions.
Will this work?

}

@media (max-width: 320px)
}
body {
padding-top: 45px;
}

[CG Klein]

I can’t seam to figure out how to get the menu to have the proper spacing from the top on mobile.
When scrolling up it goes in the proper place but at top spacing is off.

[Tom]

I tested it all in developer tools on your site, and it all worked nicely.

Can you pop in all of the code and let me know so I can take a look? For mobile, you will need to update the margin-top for each breakpoint the top bar changes height.

[CG Klein]

Do I need to add padding-top with breakpoints?

.top-bar {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
}
body {
padding-top: 45px;
}
.navigation-stick {
margin-top: 45px !important;
}

@media (max-width: 768px) {
.navigation-stick {
margin-top: 50px !important;
}
}

@media (max-width: 420px) {
.navigation-stick {
margin-top: 80px !important;
}
}

@media (max-width: 320px) {
.navigation-stick {
margin-top: 115px !important;
}
}
.mobile-header-content {
float: right; /* etc.. */
}

[Tom]

If the height of the top bar changes, then yes. That 45px is the height of the top bar, which pushes the non-fixed elements down.

If that height changes, the padding has to as well.

[CG Klein]

How would I add breakpoints for padding-top?

[Tom]

For example, now you have:

@media (max-width: 768px) {
    .navigation-stick {
        margin-top: 50px !important;
    }
}

You would do this:

@media (max-width: 768px) {
    .navigation-stick {
        margin-top: 50px !important;
    }

    body {
        padding-top: 50px;
    }
}

[CG Klein]

That worked great thank you for all your help!

[Tom]

You’re welcome 🙂

[Michael Andersen]

Hi,

What about having a feature in the customizer to check on/off whether you want to the Topbar or Footer Bar sticky or not?

/Michael

[Tom]

Top bar would be tough to integrate with the sticky nav, but definitely possible.

The footer bar being sticky should be pretty easy with some CSS.

[Author]

Posts