Hide the Theme Menu
When your site is resized and the Responsive Menu shows, how do you stop your original menu from showing.
For this we will need to edit the following 2 settings:
- Menu Breakpoint
- Original Menu to Hide
Menu Breakpoint
The Responsive Menu plugin doesn’t show or hide the Responsive Menu based upon the User Agent or Device being used specifically (iPhone, Android etc.) but rather the size of the current browser window.
This is done consciously to enable it to work correctly across as many devices as possible and to not restrict it to specific mobile/tablets etc.
With this in mind we need to set a point at which the Responsive Menu begins to show and this can be anything you want it to be (it also enables you to use it as your main/only menu if required) and adds greater flexibility.
If you do want to target specific devices then you can use their pixel display widths to target these, otherwise its best to change this value and see what works best on your site. Try changing this value on your site, refreshing your browser and resizing. Doing this multiple times will help you decide what works best for your site.
For example, this site is set to 1050px and this is because this is the point at which my main menu no longer fits on one line in a browser window.
Original Menu to Hide
This can be a bit more complex and if you know nothing about CSS then you may get lost here, however it really isn’t hard once you know what you are looking for.
In this box you will need to add either the ID prefixed with # or a unique class prefixed with . of the containing element of your original menu.
For example if your original menu looked like this:
<div id="main-menu">Home / About / Contact</div>
Then you would add #main-menu to this box. Alternatively:
<div class="main-menu">Home / About / Contact</div>
In this case, you would need to add .main-menu, due to the fact that this is now a class and not an ID.
To find the correct element to hide you can either look at your Themes source files, use a tool like Firebug or Console Tools (by hittig F12) or looking at the source code of the site.