Fixed nav bar covers content below it

HTML-CSS
1

The nav bar is set to position: fixed;. The problem is the cover section below it act like there is no nav bar and align to the top of the page. This causes to cover some portion of the cover section (image).
Codepen link: https://codepen.io/nimanthadilz/pen/GRZVqvb?editors=1100

I was thinking adding some padding to the top of the body element. But how can I correctly align the cover section right below the nav bar ? There is a media query also, which changes the navbar when screen width below 600px.

ss
ss1366×768 154 KB

2

Hey there,

nice to meet you! :wave:

Seems you’ve already fixed it :+1:

MDN says:

fixed: The element is removed from the normal document flow, and no space is created for the element in the page layout.

I mostly create a variable for the header height, then use this also as padding for the content.

2 Likes
3

Thank you very much for your reply.

Actually I am not clear how to implement what you are explaining. I don’t know how to get the height of the <nav> element into a variable. I tried googling.
I guess it should be something like this but not sure:

:root {
  --height-of-nav : <height of the nav>
}

How can I get the height value into a variable ?

4

By setting it yourself like --height-of-nav: 50px

1 Like
5

Thank you again for your support