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
2 Answers
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
Comments
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.
