Navbar help for technical documentation project

HTML-CSS
1

Hi all, first post! :slight_smile: I’m on the technical documentation project and having trouble resizing the navbar - I’ve played around with a few different displays & positions, but there’s still an overlap between the main doc and navbar list items on smaller screens. Does anyone have any suggestions? Thanks!

https://codepen.io/Stu393/pen/ZELpEdM?editors=1100

2

Hello !
The issues are comming from your @media, for starters you told it to always be 100% width on small screens and made it always on top with zindex and position absolute.
You can start from this code here and adjust it how you want :

@media  (max-width: 850px) {
  #navbar {
    width: 25%;
    top: 0;
    padding: 0;
    margin: 0;
    overflow: scroll;
  }

Media queries can be a bit confusing, so i’d suggest do a bit more ressearch on the topic, and always keep in mind : Websites by default are always responsive, we break them with css :sweat_smile: , so be careful what properties you use
Hope this helps
PS : you should try a lower breakpoint for @media, ie 600 - 700 px

3

Thank you! I’ll have a play around with that :slightly_smiling_face:

4

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