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?
Nov 9, 2022, 4:36 AM
2
1
11
comments
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 */