Changing body margin depending on nav height

user_18022212 0
Viewed 51

On the website I am making, I have a navbar and then an image right under it.

<Navbar />
<img src="idk" />
<!-- Example -->

My Navbar uses fixed position which means that it is positioned on top of the image. (I don't want that) I could fix this by adding a margin to the top of the body but the problem is that the height of may nav bar fluctuates depending on the size of the browser window. For example, if you shrink the browser window, the nav bar gets smaller to account for the lack of space. This means I can't just use a hard coded margin.

btw I'm using react

reactjs margin css html
1 Answers

Once you've fixed an element it's taken out of the flow of the other elements. There's no workaround to this, as that's the expected behaviour.

As you've correctly said, you're going to want to add padding/margin to the body element (or any page container element), but also set the height of your Navbar element with media queries.

That way you control both the nav height and the top body margins and can adjust depending on the screen size via media queries.

user_24074600
Related