Hide Menu on Mobile?

curtm275 · July 2015

I'd like to use a different menu on mobile. How can I hide the default menu when the screen size drops below 500 px?

Albert · July 2015

Hi,

what menu exactly you want to use on screens smaller then 500px? Any url to your site where you want to do this?

curtm275 · July 2015

The way I've chosen to display my logo creates problems with the header and menu on mobile. So i'm using this plugin as an alternative for my mobile menu - http://codecanyon.net/item/taptap-a-super-customizable-wordpress-mobile-menu/9966828

So I'd like to use the betheme header and menu on desktop and hide it when the screen size is below 500px and use the alternate menu instead.

A link to my site (still in production) is here: http://192.185.109.44/~kimmelgowns/

Notice if you drag the window to reduce the screen size, an additional menu appears. I'd like to hide the BeTheme header/menu at this point.

Albert · July 2015

Please deactivate maintenance mode so we can look on it.

curtm275 · July 2015

Sorry. Deactivated.

Albert · July 2015

Ok. So to remove our responsive menu on screens smaller then 500px, please use below css:

@media only screen and (max-width: 500px) { #Top_bar a.responsive-menu-toggle { display: none !important; } }

curtm275 · July 2015

Awesome. Thank you. Can you give me the code to also hide the logo?

Albert · July 2015

Sure. It's:

@media only screen and (max-width: 500px) { #Top_bar .logo { display: none !important; } }

Hk096j · June 2016

Hi Guys thanks this helps me to hide the menu but i have a question... on my web i have grid of 1080px but i want to show menu (normal menu not responsive one) at 1024px how can i do that...

First step is already done by hiding the menu now i want to show the alternative menu which is the default menu.

Site i am bulding: http://192.185.4.105/~pmginc1/buxner/

Albert · June 2016

For that, you need to use Responsive Menu Initial width option under Theme options > Responsive section.

Hide Menu on Mobile?

Comments