Hiding WP-Menu to Replace With Responsive Menu [V4]
Hiding the Original WordPress Menu to replace it with the Responsive Menu Plugin’s own new menu is very simple, just need to follow the below two steps and you’re done.
Note: The below-mentioned steps only hide your original WordPress Menu to replace it with the new Responsive Menu to know more about building the new Responsive Menu visit Responsive Menu V4 Docs
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 that hard once you know what you are looking for.
Step 1:
Navigate to Menu Customization > Settings > General Settings > Hide Theme Menu of the new Responsive Menu V4
Step 2:
Now, In the empty box below the Hide Theme Menu option, To hide your current theme menu you need to put the CSS selector here. Any legal CSS selection criteria is valid.
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 hitting F12), or looking at the source code of the site.
After making the above changes go ahead and hit the update button to save the changes. Hence, you’ve successfully hidden the original WordPress Menu for a newer Responsive Menu.