Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I have a primary menu in the main navigation and a secondary menu in the header widget. Is there a way to call these different names in responsive, like Main Menu for the primary and Resources for the secondary? When I set the menu title in the theme settings, it titles both menus as “main menu.”
Thanks!
Jenna
Hi Jtabrams
So sorry we weren’t able to reply sooner.
Unfortunately, this isn’t possible without a fair amount of custom coding. This is beyond the scope of what we can help you with on the forums, but you could hire a developer to implement this for you.
We highly recommend using https://codeable.io/.
Thanks Andrew. Since we can’t rename the secondary menu, is there a way to just pull it into the bottom of the primary menu when in responsive? So that there aren’t two menus called “menu?”
Unfortunately, not that I know of. The responsive menu duplicates the primary menu.
Here is a quick solution for displaying menu items in your mobile menu and not in your regular desktop menu.
1. We’ll be using the lightweight and simple plugin: Menu Items Visibility Control: https://wordpress.org/plugins/menu-items-visibility-control/. Download from the link or go to Plugins > Add New and search for Menu Items Visibility Control. Install and activate.
2. Go Appearance > Menus and select the menu you’d like to edit. This plugin has lots of possibilities. In this tutorial, we’re just going to look at displaying a menu item for our mobile device users only.
3. Pick a menu item and edit it. Locate the Visibility field and add the following argument:
Keep in mind that the conditional statement used is device dependent. Re-sizing your browser on a desktop won’t reveal the menu item, you’ll need to test on your mobile device.
That plugin works perfectly!
Now, how do I hide my secondary menu when it goes to responsive?
Let’s try hiding it using the following at Appearance > Custom CSS:
@media (max-width: 680px) { #masthead .hgroup #header-sidebar aside.widget.widget_nav_menu { display: none; } }Adjust the 680px resolution breakpoint as required.
This worked! We have it implemented on our live site, http://ritchieschool.du.edu. Thank you so much for walking me through this!
Awesome :) Really glad to hear that did the trick.
All the best.