Choose different menu for mobile

Home Forums Pro Support Choose different menu for mobile

This topic contains 28 replies, has 2 voices, and was last updated by Hannah Smith Hannah Smith 3 months ago.

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #66984
    Hannah Smith
    Hannah Smith
    Participant

    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!

    #67011
    Hannah Smith
    Hannah Smith
    Participant

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

    #67010
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #67009
    Hannah Smith
    Hannah Smith
    Participant

    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!

    #67008
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #67007
    Hannah Smith
    Hannah Smith
    Participant

    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!

    #67006
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #67005
    Hannah Smith
    Hannah Smith
    Participant

    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!

    #67004
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #67003
    Hannah Smith
    Hannah Smith
    Participant

    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.

    #67002
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #67001
    Hannah Smith
    Hannah Smith
    Participant

    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!

    #67000
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #66999
    Hannah Smith
    Hannah Smith
    Participant

    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!

    #66998
    Peter Featherstone
    Peter Featherstone
    Participant

    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

Viewing 15 posts - 1 through 15 (of 28 total)

The topic ‘Choose different menu for mobile’ is closed to new replies.