[Resolved] Sticky Nav on Tablet

[Ben]

Hi again,

My sticky navigation (specifically on an iPad pro in portrait in chrome dev tools, but it happens on other screen sizes in that range as well) is not lining up with my main nav. It’s moving to the right (I think it’s ignoring the 25px margin-right that’s on my main nav).

staging2.getkohort.com
kohort
stage17*

I’ve tried adding margin to the .main-navigation.navigation-stick with a @media before it to target that size, but it doesn’t seem to help.

Thanks for your help!

[Tom]

Instead of this:

@media (max-width: 1200px) and (min-width: 769px) {
    .main-navigation.navigation-stick {
        margin-right: 25px !important;
    }
}

Try this:

@media (max-width: 1200px) and (min-width: 769px) {
    .main-navigation.navigation-stick {
        padding-right: 25px !important;
        box-sizing: border-box;
    }
}

[Ben]

PERFECT! Thank you so much!

[Tom]

You’re welcome 🙂

[Author]

Posts