Reputation: 31
To hide the menu bar on mobile screen i used:
@media (min-width:320px){
menu{display:none;}
}
@media (min-width:481px){
menu{display:none;}
}
But this also lead to disable the menu on desktops too.
This is the website whiskersjersey.co.uk
Upvotes: 0
Views: 589
Reputation: 1360
You should use:
@media (max-width:481px){
menu{display:none;}
}
instead of min-width
. I would also recommend using selectors (.menu
or #menu
) instead of a direct DOM element targeting, since this element itself can be used in other parts of the website and this will give you a better accuracy on what you desire to style.
Upvotes: 1
Reputation: 2404
You should use @media (max-width:481px) {menu{display:none;}}
instead of min-width
if you just want the menu bar to be hide on mobile screen
Upvotes: 4