This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Different Names for Responsive Menus

Resolved 7 replies premiumthemetheme-vantage
jtabrams
10 years ago · Last reply by Andrew Misplon 10 years ago

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

URL: http://ritchieschool.staging.wpengine.com/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 10 years, 10 months ago

    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/.

  2. jtabrams 10 years, 10 months ago

    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?”

  3. Andrew Misplon Staff 10 years, 10 months ago

    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:

    wp_is_mobile()

    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.

  4. jtabrams 10 years, 10 months ago

    That plugin works perfectly!

    Now, how do I hide my secondary menu when it goes to responsive?

  5. Andrew Misplon Staff 10 years, 10 months ago

    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.

  6. jtabrams 10 years, 10 months ago

    This worked! We have it implemented on our live site, http://ritchieschool.du.edu. Thank you so much for walking me through this!

  7. Andrew Misplon Staff 10 years, 10 months ago

    Awesome :) Really glad to hear that did the trick.

    All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread