Fixed Navbar being pushed down by next div margin....?

Hey, I’d really like some help with this navbar… I’ve used position: fixed; and then added a margin to the next div so that it isn’t immediately behind the navbar. However, this margin has also pushed the navbar down from the top of the screen so that the next div is showing both before and after the navbar. I’ve tried adding top padding to the body but that also pushes the navbar down.

Does anyone have any ideas?

Cheers,

P

use padding instead of margin for the div

Sorry, should have explained why. When you give an element a fixed position, it is taken out of the normal flow of the document, which means that as far as all the other elements are concerned, that fixed element isn’t there. Therefore, the margin for your div element is relative to the top of the page, not the bottom of the fixed element; however, that fixed element knows that it is there, and will be adversely affected by the margin.

That’s not the best explanation but hopefully you glean the essence. In any case, were you to use padding-top for that div and leave the margin at 0, the navbar will move back to where you want it and the div will position itself with the padding-top you add (again, relative to the top of the page). Hope this helps.

In so far as I know, there really isn’t a cleaner way to do this without using jQuery.

2 Likes

Thanks very much for the reply and detailed explanation! Got it sorted now :slight_smile: