How do i make my nav bar responsive?

1

Im currently making my portfolio and im trying to make my nav bar responsive when resizing, i used @media screen and but it still doesnt work. I used display flex to make my nav bar in line. Dont mind my nested classes in CSS i learned that new trick and i find it much easier than by writing .something .blabla .blala { … } instead. Any tips on making my nav bar responsive? I still havent stiled it yet, but i will tomorrow.

2

If you don’t plan on using BootStap, then you are on the right track to making it responsive.
You will have to test it on every device and make multiple breakpoints if you want it to always look how you like.

@media only screen and (min-width: 30em) {
  .navigation {
    .navigation-bar {
      flex-direction: row;
    }
  }
}

What you code does above is makes it appear as a column only if the width is under 300px.
It probably makes sense to change it to around 425px. You could go further into the mobile responsiveness and ad in additional breakpoints as well. I use px to distinguish screen sizes typically, but they aren’t too had to convert. Below is 425px converted to em

@media only screen and (min-width: 42.5em) {
  .navigation {
    .navigation-bar {
      flex-direction: row;
    }
  }
}
1 Like