Okay so umm how do you show and hide the navbar text/icons based on screen size in just CSS? here is the navbar stuff kinda:
<a href="/" class="desktop">Home</a>
<a href="/" class="mobile">insert icon here</a>how to I show the mobile one and hide the desktop one and the other way around for desktop?
comments
Highlighted comment
Use media queries
Um so Smth like this (assuming 800px is min desktop width)
.mobile, .desktop {
display: hidden;
}
@media screen and (max-width: 800px) { /* this checks for small screens=mobile. So apply mobile style. */
.mobile {
display: inline; /*default for <a> tag*/
}
}
/* make another media query but with min-width: 800px for showing desktop elements */