Choose different menu for mobile

[Hannah Smith]

Hello,

I’ve just purchased this plugin and I’m having difficulties selecting a different menu for mobile. I want to use the theme’s default menu for desktop and only use this plugin for mobile. I would like to use a different menu for mobile, but it automatically selects the main desktop menu and I cannot change this option.

Could you please assist me?

Thanks!

Add New Note to this Reply

[Hannah Smith]

Note: My issue is that I cannot select the ‘Menu to Use’ I want.

Add New Note to this Reply

[Peter Featherstone]

Hey there,

What do you mean by you can’t select it, are you saying the dropdown doesn’t work?

If so that sounds like another plugin or the theme conflicting with my admin page.

Please advise

Peter

Add New Note to this Reply

[Hannah Smith]

I figured out the issue — it appears that none of the dropdowns actually work because ‘dropdown-menu’ is set to display:none. No idea if it’s a conflict with another plugin, though…

Another thing — I have 2 submenus for every main menu item. Is it possible to display the first submenu with a sliding animation, and the second with an accordion? Thanks!

Add New Note to this Reply

[Peter Featherstone]

Hey Smith,

Unfortunately not, that level of customisation would be quite difficult to implement in a plugin like mine, something like that would more likely need to be done as a completely custom built menu.

You can only choose one or the other to apply to the same menu.

I hope that helps

Peter

Add New Note to this Reply

[Hannah Smith]

Hello,

Thanks for the reply.

Is there a way to add a specific class to the off-canvas mobile menu container when a specific menu item is clicked/tapped? I.e. you tap ‘Menu item 1’, class ‘menu-item-1’ is added. If you click ‘back’, the class is removed. Then if you tap ‘Menu item 2’, class ‘menu-item-2’ is added and removed if you click ‘back’, etc.

I hope it makes sense.

Thanks!

Add New Note to this Reply

[Peter Featherstone]

Hey there,

What do you mean by off canvas mobile menu? What you are asking sounds like something that would need to be done via some custom javascript not by the plugin itself.

Please advise

Peter

Add New Note to this Reply

[Hannah Smith]

Hello,

Yes, that’s right. Here’s the code I’m trying to use. I’m no developer and I don’t know JS/jQuery, but this code worked for my theme menu:

var responsive_menu = [$('#responsive-menu-pro-item-4333 > a'),$('#responsive-menu-pro-item-4368 > a')];

var responsive_menu_background = $('#responsive-menu-pro-container');
var responsive_menu_li = $('.responsive-menu-pro-item');

responsive_menu.forEach(responsive_mobile_menu);

function responsive_mobile_menu(item, index) {
item.click(function(){
switch(index) {
case 0:
responsive_menu_background.css("background-color", "#ff3996");
responsive_menu_li.css("color", "white");
break;
case 1:
responsive_menu_background.css("background-color", "#ff9b39");
responsive_menu_li.css("color", "white");
break;
default:
responsive_menu_background.css("background-color", "#fff");
responsive_menu_li.css("color", "white");
}
}, function(){
responsive_menu_background.css("background-color", "#fff");
responsive_menu_li.css("color", "black");
});
}

It doesn’t work. Again, I don’t think it’s the code itself because it’s working for the theme menu, but I’m not sure since I’m not exactly a JS/jQuery expert. Any thoughts? The problem may be selecting only the very first li > a as the submenus also have them. Tried the first-child method, it’s not working.

Thank you!

Add New Note to this Reply

[Peter Featherstone]

Hey Smith,

Unfortunately I woudln’t be able to debug such a large piece of code particurlary easily on here.

Have you shown it to any freelancers or anyone proficient in jquery/asked on StackOverflow etc?

Please advise

Peter

Add New Note to this Reply

[Hannah Smith]

Hello there,

2 questions that I really hope you’ll be able to help with.

1. I want the whole menu link to be clickable, not just the arrow trigger. How do I do this?
2. I want to add unique classes to the first a element inside the li menu links. How do I do this? I want to be able to control the styling of this particular element in more detail.

Thank you.

Add New Note to this Reply

[Peter Featherstone]

Hey there,

1. There is the Expand Sub Menus on Parent Item Clicks option for that https://responsive.menu/docs/basic-setup/sub-menus/#animations.

2. There should already be a unique class for each menu item that you can use, if you open up the inspector tools in your browser you will see them all, each has a specific class based on the menu ID.

I hope that helps

Peter

Add New Note to this Reply

[Hannah Smith]

Hey there,

#1 is working — thanks!

For #2 — I tried targeting the ‘parent link’ but it’s not working at all. I even went as far as setting custom classes for the parent li elements and targeting either the first-child or first-of-type a link, but it still isn’t working. Whatever styling I apply to the ‘parent link’, it gets applied to the submenu items links as well. Try it yourself and you’ll see what I mean.

The only way to correctly target the ‘parent link’ would be to set unique classes for the very first a element.

I would appreciate your help.

Thanks!

Add New Note to this Reply

[Peter Featherstone]

Hey Smith,

Ok so you only want to target the very specific link?

In that case you just need the following (changing your menu ID accordingly:

#responsive-menu-pro-item-29399 > .responsive-menu-pro-item-link

For reference https://www.w3.org/TR/selectors/#child-combinators

I hope that helps

Peter

Add New Note to this Reply

[Hannah Smith]

Hello,

Thanks for your reply, but unfortnately I’ve tried that already.

This is the structure of the responsive menu:

<li class="PARENT">
<a>Menu link</a> <!-- my target -->
<ul class="submenu">
<li><a></a></li> <!-- NOT my target -->
<li><a></a></li> <!-- NOT my target -->
<li><a></a></li><!-- NOT my target -->
</ul>
</li>

When I try to select the very first a element (my target), all other a elements (not my target) within the parent li element are selected, too.

The only way to correctly target the a element I want would be to set a unique class for it, which would no be inherited by the a elements within the submenu. I hope that makes sense.

I would appreciate your help.

Thanks!

Add New Note to this Reply

[Peter Featherstone]

Hey Smith,

Did you try my example above? The > as per the referenced link only targets immediate children of the parent.

You don’t need explicit classes to trigger them.

I’ve tested the exact CSS above on my site and it worked as you want.

Please advise

Peter

Add New Note to this Reply

[Author]

Posts