Petey88 Petey88 - 1 year ago 56
CSS Question

Having Trouble With Max-Width Menu

I'm having trouble with the main menu in the header of my Wordpress site here:

The only way I can get it to fill the entire box is by declaring it to have a width of 950px. However, I want it to disappear when the user is on a mobile device leaving just the mobile menu.

My CSS looks like this, but it is not working:

@media screen and (max-width: 900px){#access {display:none;}}

Not sure how I can get it to collapse otherwise. Any help would be appreciated.

Answer Source

You just need to add the !important tag to your css, so that it overrides everything else. Like this:

display: none !important;

I tested this on your site and it worked.