Responsive Navigation (CSS only)

Question

How can I create a vertical navigation bar for smartphones and a horizontal navigation bar for desktops?

I need a navigation bar for this example: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown

Answer 1

You can give any element completely different styles at different screen sizes. Just use media queries:

@media (max-width: 768px /* Styles for 768px screen size and smaller */) {
   .element {
      background: red;
   }
}

@media (min-width: 768px /* Styles for 769px screen size and larger */) {
   .element {
      background: blue;
   }
}

Here's a helpful link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

Use media queries. With these you define a break point. Within each break point you can assign different css rules to your divs etc.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

With this example you can simply change width to 100% to get the desired effect. But do this in a media query at your required break point and that way you have two + styles depending on screen size.

example css