radi8 — 11/9/2022, 4:36:38 AM

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?

♥ 2 ↩ 1 💬 11 comments

comments

lily:

::before

11/9/2022, 3:26:00 PM
lily:

oh right i misread it, yeah you want media queries

11/9/2022, 3:26:18 PM
radi8:

why did you make random note, plez delete as I can not

11/9/2022, 7:13:19 PM
radi8:

in the website with the stuff I found

11/9/2022, 7:13:34 PM
lily:

css

11/9/2022, 11:29:29 PM
radi8:

I was talking about the storage website

11/10/2022, 3:04:31 PM
lily:

oh that

11/10/2022, 3:20:11 PM
radi8:

yes

11/10/2022, 3:33:53 PM
quantum-codes:

Use media queries

11/9/2022, 3:05:57 PM
radi8:

how

11/9/2022, 3:06:31 PM
quantum-codes:

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 */
11/9/2022, 3:15:34 PM