Build a Technical Documentation Page Challenge

Here is a link: https://codepen.io/Harviator/pen/xxRoddX

Tell us what’s happening:
I used CSS grid and I can’t get my side navbar to always stay visible. It passes the testing script, but I know it’s not right, so I want to fix it.

Your code so far
I’ve tired making the side navbar “position: fixed;” along with defining the height and width, but this causes other issues and makes my media query not work. I saw on stack exchange something about setting overflow and height limitations for the content, but I couldn’t get that to work for me.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15.

Challenge: Build a Technical Documentation Page

Link to the challenge:

Hi @harviator. Here is a quick-and-dirty fix:

nav {
  height: 100vh;
}

And in your media query:

@media (max-width: 800px) {
  nav {
    height: 10vh;  /* adjust to your liking */
    overflow-y: scroll;
  }
}

However, because your nav {} block comes after the media query, it will override its counterpart inside the media query. So you’ll need to move the nav {} block above the media query, otherwise the nav element will cover the entire screen on mobile.

For a better user experience, you can try implementing a hamburger menu on mobile :hamburger:

1 Like

Works great! Thank you!

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