I need help fixing 100vh mobile nav, my content is behind navbar

HTML-CSS
1

Can anyone help me please, my content is behind my mobile navbar and i cant seem to fix it. I want my mobile navbar to take up the whole screen and when I click on the links then it scrolls down to the sections of the page.
https://codepen.io/miriam-jinx-olivier/pen/dyOXRNd?editors=1100

2

I’m pretty unsure of what you want; this is what I guessed: 1. you want your content to be behind your navbar, which has a fixed position, and 2. when in mobile, you want your navbar to take up the entire screen.

  1. you already did it. Add a background-color or background-image property to your #navbar to stop the navbar being transparent.
  2. In your @media change your header to have height:100vh, then your #navbar to have height:100%. If you want the menu items to spread out more, also change your #navbar .menu to have height:100%
1 Like
3

Also, remember that you have position: fixed on the header as well as the nav so you would need to change that as well in the media query for the scroll to work.

If you want to “reset” properties you can use the unset value.

1 Like
4

I added background color and changed the heights. Its still not working :frowning: …I want the navbar to take the full height of the mobile view.

5

It worked! I reset the fixed position on the nav and then I made the ul full width! :smile: :smile: :smile:

6

Thank you so much for you assistance ! :slightly_smiling_face:

7

Thank you so much for your help!

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.