Why is my navigation menu hiding under the header bar? I want it to come just after the header in a 1 column display.

Question

https://code.sololearn.com/WRslOYz6m7c2/?ref=app

Answer 1

Abhay and DN Josh:

positionned elements (all 'position' values except 'static') are removed from the page normal flow, so blocks elements no more follow the rule of having by default full width... that's why they must have an explicit width set to avoid adapting the width to their content (auto width) ;)

Answer 2

I don't have an answer for "why" But here is the solution,

nav{
display:block;
background-color: lightblue;
position:absolute;
top:10vh;
}

And i always seen the elements starting at top left unless they have a default property of position set to one of the values with top and bottom specified so this might be "why ".

Answer 3

Abhay thank you so much. But I noticed the width need to be set at 100% so that it can take the full width.

May be you should check the code again

Answer 4

that's also probably the explanation of why the navigation menu was hide by header bar (just guessing, as code was updated ^^): if header was absolute positionned, it was removed from the normal flow, so next element (nav) have it's default position pull up to document top... if it (nav) was positionned also, then it was default z-indexed higher (as coming after in code) than header and showed ahead header... if it (nav) was not positionned, then it would be shown in normal flow, so below header (z-index only apply to positionned elements) ^^

Answer 5

DN Josh i didn't saw it but ty . I don't know why it doesn't take the full width even though it is a block element !

Answer 6

visph tyvm!