Navbar Being Glitchy when Switching from Relative to Fixed

[Aragona]

I’m trying to recreate something similar to the main x theme demo site where the slider/hero is full screen but the nav is in view as well (in this case over top of the slider). Then once you scroll past the slider it is fixed to the top.

I managed to create this with the Integrity 1 demo and setting the menu to a negative margin so it displays on top of the slider. But I’m noticing when you scroll down the page the behavior is glitchy.

If you look at the code as you scroll slowly you can see the ‘x-navbar-fixed-top’ is actually being added, dissappearing, and then re-adding again. Because I have the negative margin when the nav isn’t fixed this causes it to jump all over the place.

Any ideas on how to fix this? Here is the site to see the example: http://aragona2.aragonaworkspace.com/

[nabeel]

Hi @Aragona,

Thank you for reaching out to us. To fix the issue just replace this part of your code:

.x-navbar {
    margin-top: -90px;
}

With this:

header.masthead {
    margin-top: -90px;
}

This should fix the issue. Let us know how this goes!

[Aragona]

That works perfectly - thank you Nabeel!

[friech]

You’re more than welcome, glad we could help.

Cheers!