CSS display none mobile and tablet are shown in same query - html

Question

i have the following code / CSS what i am trying to do is only display one type of menu depending on the screensize / device (Mobile, tablet, desktop) however my mobile and my tablet are always shown together.
Can anyone see what i might be missing?
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
#media (min-width:320px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:480px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:600px) {
.tablet-nav {
display: block;
}
}
#media (min-width:801px) {
.tablet-nav {
display: block;
}
}
#media (min-width:1025px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
#media (min-width:1281px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>

Answer 1

Use max-width instead.
Here's what your code is saying, in plain English:
Hide all the menus
However, if it's bigger than 320px, show the mobile menu button
And if it's bigger than 480px, show the tablet menu button
And the ones after that basically just get in the way of things, so you can remove those.
You should use some different media queries instead, like the ones in the code below, which use max-width.
I have also changed them to be more realistic for those devices.
/* desktops */
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
#media (max-width: 1000px) {
/* tablets */
.mobile-nav {
display: none;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: block;
}
}
#media (max-width: 600px) {
/* mobiles */
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>

Answer 2

As i write in comment use max-width for perfom query like:
#media (max-width:599px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:600px) and (max-width:1024px) {
.desktop-nav {
display: none;
}
.tablet-nav {
display: block;
}
.mobile-nav {
display: none;
}
}
#media (min-width:1025px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>

Answer 3

You have missed to overwrite .mobile-nav class on #media 600px and 801px.
There, you have rewritten .tablet-nav but have not rewritten .mobile-nav so it is set to the last class of #media 480px which is set as display: block.
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
#media (min-width:320px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:480px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:600px) {
.tablet-nav {
display: block;
}
.mobile-nav {
display: none;
}
}
#media (min-width:801px) {
.tablet-nav {
display: block;
}
.mobile-nav {
display: none;
}
}
#media (min-width:1025px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
#media (min-width:1281px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>

Answer 4

use min-width and max-width in media queries.
#media only screen and (min-width: 601px) and (max-width: 1000px) {
.desktop-nav, .mobile-nav {
display: none;
}
}
#media only screen and (min-width: 1001px) {
.tablet-nav, .mobile-nav {
display: none;
}
}
#media only screen and (max-width: 600px) {
.desktop-nav, .tablet-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>

Answer 5

add .mobile-nav { display: none; } in #media (min-width:600px). check link here to see result.
But that's a lot of media queries. you can optimize that. and keep in mind when you put something in min-width 320. it will be excuted for all widths > 320. so if you don't want it to work like in 768. you should add class there and change it.