Choose different menu for mobile
Home › Forums › Pro Support › Choose different menu for mobile
- This topic has 28 replies, 2 voices, and was last updated 4 years, 10 months ago by Hannah Smith.
-
AuthorPosts
-
June 13, 2019 at 3:50 pm #66984Hannah SmithParticipant
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!
June 13, 2019 at 4:28 pm #67011Hannah SmithParticipantNote: My issue is that I cannot select the ‘Menu to Use’ I want.
June 13, 2019 at 6:25 pm #67010Peter FeatherstoneParticipantHey 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
June 13, 2019 at 11:02 pm #67009Hannah SmithParticipantI 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!
June 13, 2019 at 11:06 pm #67008Peter FeatherstoneParticipantHey 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
June 14, 2019 at 5:56 pm #67007Hannah SmithParticipantHello,
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!
June 14, 2019 at 7:49 pm #67006Peter FeatherstoneParticipantHey 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
June 15, 2019 at 4:46 pm #67005Hannah SmithParticipantHello,
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!
June 15, 2019 at 6:17 pm #67004Peter FeatherstoneParticipantHey 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
June 15, 2019 at 8:37 pm #67003Hannah SmithParticipantHello 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.
June 16, 2019 at 10:14 am #67002Peter FeatherstoneParticipantHey 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
June 16, 2019 at 5:09 pm #67001Hannah SmithParticipantHey 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!
June 16, 2019 at 7:00 pm #67000Peter FeatherstoneParticipantHey 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
June 16, 2019 at 7:25 pm #66999Hannah SmithParticipantHello,
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!
June 16, 2019 at 8:13 pm #66998Peter FeatherstoneParticipantHey 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
-
AuthorPosts
- The topic ‘Choose different menu for mobile’ is closed to new replies.