Menu above built with this plugin including Mega Menu.

Choose different menu for mobile

This topic contains 27 replies, has 2 voices, and was last updated by  Peter Featherstone 1 month ago.

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #60122 Reply

    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!

    #60128 Reply

    Smith
    Participant

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

    #60140 Reply

    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

    #60161 Reply

    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!

    #60163 Reply

    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

    #60195 Reply

    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!

    #60198 Reply

    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

    #60216 Reply

    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!

    #60222 Reply

    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

    #60235 Reply

    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.

    #60245 Reply

    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

    #60254 Reply

    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!

    #60261 Reply

    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

    #60262 Reply

    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!

    #60263 Reply

    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)
Reply To: Choose different menu for mobile
Your information:





<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">

Responsive Menu Title Image
Responsive Menu
No coding knowledge needed