Why does a sticky nav change width when it 'sticks'?

Question

I have created a sticky nav using way points. The nav is nested inside the header which sits inside a wrapper. If the nav is set to width:100% ie the full width of the wrapper, its width becomes 100% of the body when the waypoint is hit and the position:fixed.

Is there a way for a sticky nav to have a percentage width?

Answer 1

I have solved my own question.

The nav was set to 100% of the wrapper which was 80% of the body. As setting the nav position:fixed; takes it out of the flow, changing the width of the nav to be a percentage of the body width (80%) resolves the problem.