0

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

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

9th Jun 2021, 8:03 PM
DN Josh
DN Josh - avatar
6 Respuestas
+ 2
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) ;)
9th Jun 2021, 11:03 PM
visph
visph - avatar
+ 1
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 ".
9th Jun 2021, 8:18 PM
Abhay
Abhay - avatar
+ 1
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
9th Jun 2021, 8:36 PM
DN Josh
DN Josh - avatar
+ 1
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) ^^
9th Jun 2021, 11:21 PM
visph
visph - avatar
0
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 !
9th Jun 2021, 8:45 PM
Abhay
Abhay - avatar
0
visph tyvm!
10th Jun 2021, 7:41 AM
Abhay
Abhay - avatar