CODEWITHSUNDEEP
htmlcssmobilemenudesktop
Sammy7
Sammy7

Reputation: 372

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.

Upvotes: 2

Views: 2839

Answers (1)

Stickers
Stickers

Reputation: 78676

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

Upvotes: 3

Related Questions