Reply To: Sticky nav with effect, menu moves to right

[Tom]

Fixed elements need to have a set width as they’re technically not block elements.

In the fade/slide elements, the width is 100% by default. The issue you’re having is the 100% isn’t respecting the border you set.

With the no effect, I had to code it so if you were using a contained layout, the navigation was contained as well. It takes some extra coding, so I didn’t do the same thing to the fade/slide effect.

However, if your layout is contained and you’re using fade/slide, the menu should also be contained. I’ll be sure to work this into a future version.

For now, I do have a solution for you.

1. Scrap the border.
2. Give the HTML element a background color:

html {
    background: #2E812E;
}

3. Give the body a width and center it:

body {
    width: 98%;
    margin: 15px auto 0;
}

4. Set the sticky navigation to the same width:

body.sticky-menu-slide .navigation-clone,
body.sticky-menu-fade .navigation-clone {
    width: 98%;
}

Hope this helps 🙂