Search code examples
jqueryhtmlcssmenusticky

Why does my sticky menu jump left when changing to position:fixed

I came across a strange behaviour on my site when trying to create a sticky menu. Well, a sticky menu is alright, but when it sticks (after scrolling page down) it suddenly moves to the left.

I think it is somehow related to changing style to position:fixed. How can I make the menu to stay on the same size, centered, as it looks like when unsticked?

You can check the live demo here. Thank you.

Solution

  • Width 100% won't be effective because your layout has a sidebar so you need subtract sidebar and paddings width 

    .isStuck {
  z-index: 1000;
  width: calc(100% - 480px);
}