Bootstrap 4 fixed nav not fixed

I have a fixed nav which is working as a static html page, but when I built it into a theme the fixed/sticky part is not working. The html looks identical as far as I can tell, but maybe some of Wordpress’s css is changing it? When I inspect it the styles look the same as well unless I’m missing something.

here is a link to the working static version

here is a link to the wordpress dev

I explained why that won’t work in your other thread but to recap you have put the sticky nav inside an element called #page which basically only contains the stickynav. Therefore the nav is only sticky within that element and as soon as that element scrolls away (which is immediately) the sticky nav is no longer sticky.

You need to either remove the element called #page or indeed wrap #page around the whole page content and then the nav will stay sticky while the rest of the content in #page scrolls.

A sticky element is only sticky in relation to its immediate parent so when you want it to be sticky in relation to the body element it needs to be a direct child of the body.

thanks Paul… looks like I had an extra closing div in my html which closed the #page tag early. Thanks again!!!

1 Like