Top navigation bar and content position

[isendersms]

I’m want to define top navigation bar as FIXED and the content below as RELATIVE, i mean that i want the page content position below the navigation bar, but in my code result the content is going on the navigation bar, there is a good way to fix it?

I don’t want to use margin-top: 100px… i want the content position go below the navigation auto, and not by pixels

https://codepen.io/xOldeVx/pen/VQPQJj

[yoyo]

Practically Not possible. Since Position:fixed makes your navigation out of flow from the body. so the other RELATIVE parts of your HTML did not know there is such navigation available. so there is no way to do that. you can set Margin to your MAIN Content and Top:0 for your fixed nav.

By the way may i know the reason for this auto positioning idea ?

[Paulie_D]

The options are to have a fixed height top bar and adjust the margin/padding of the content accordingly

OR

Use Javascript to obtain the height of the top bar and adjust the CSS accordingly

[isendersms]

thanks on the explain yoyo.
I added margin to the DIV content, but now it’s margin also the navigation bar

https://codepen.io/xOldeVx/pen/VQPQJj

[yoyo]

As already mentioned you have to add top:0; for your ul to fix it on top.

Thanks.

[Author]

Posts