Sammy7 Sammy7 - 7 months ago 16
HTML Question

Remove Mobile-Menu Button from desktop site

I'm working on a HTML site and adding a mobile menu. I was able to add the menu but having trouble with the button that opens that menu. This is what I have.

<a id="simple-menu" href="#sidr">
<img class="hidedesktop" src="img/menu-icon.png" alt="Menu">
</a>


And when I press the image it opens the menu. I need it to remove this from the page on desktop and show on mobile. I've been doing some research and found that

display:none;


should work in the @media but I tried and wasn't able to set this up correctly. Can anyone tell me what I'm doing wrong? Below is my CSS for hide desktop.

.hidedesktop{
display:block;
}


and CSS for @media remove on desktop

/*@media only screen and (max-width: 768px) {
.hidedesktop{
display:block;
}
}
@media only screen and (min-width: 768px) {
.hidedesktop{
display:none;
}
}
}
*/


I would like to also hide the main menu on the mobile version but if I get help with this I think I'll figure that out.

Answer

You only need min-width for it.

@media only screen and (min-width: 768px) {
    .hidedesktop {
        display:none;
    }
}

Or to use min-device-width if you want (unlikely), make sure to check out the link below if you're not sure about it.

@media only screen and (min-devide-width: 768px) {
    .hidedesktop {
        display:none;
    }
}

Read here to learn the differences