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 13 posts - 16 through 28 (of 28 total)
  • Author
    Posts
  • #60265 Reply

    Smith
    Participant

    Hello,

    Thanks for the response. Tried this but it did nothing:

    $("#responsive-menu-pro-item-4333 > .responsive-menu-pro-item-link").click(function() {
    $("#responsive-menu-pro-container").toggleClass("mobile-menu-background")
    });

    It’s 100% correct and the same code (with different elements not related to the responsive menu) is working in other parts of the website.

    Thank you. :)

    #60267 Reply

    Hey Smith,

    Are you sure it’s the CSS that is the issue and not the javascript. For example, where have you placed that javascript and have you debugged the javascript on a simpler version?

    Can you provide your site URL so I can check for myself?

    Please advise

    Peter

    #60271 Reply

    Smith
    Participant

    The Javascript is placed in header.php. I have one more script in there and it’s working with no problems whatsoever.

    I’m 100% certain it’s an issue with the jQuery selector. It works perfectly alright if I change #responsive-menu-pro-item-4333 > .responsive-menu-pro-item-link to, say, the ID of the hamburger menu. Which is why I have suggested that a unique class (or id) would be the only way to actually select the particular link I want.

    Thank you.

    #60272 Reply

    Hey Smith,

    Can you please provide a link where you have the JavaScript on so I can see it in action?

    I don’t think its the class name that is the issue. The CSS selector I gave will definetely work. It could be that my plugin prevents further javascript from attaching itself to the clicks.

    Does the javascript work if you just use the generic css selector for every link?

    Peter

    #60273 Reply

    Smith
    Participant

    Hey there,

    I have already tried the generic selector, it doesn’t work.

    The link is http://www.beautyeager.com
    I would appreciate if you could somehow mark this whole thread as private so that other members cannot see it.

    Thanks!

    #60284 Reply

    Hey there,

    Unfortunately if it doesn’t work on a generic class it won’t work with a more specific one. What exactly is it that you are trying to achieve to see if there is a different approach?

    This is a public forum designed for helping others. If you want a private discussion you can use the contact form instead.

    Please advise

    Peter

    #60285 Reply

    Smith
    Participant

    Hey there,

    So what I’m trying to achieve is this:

    I have 4 menu links in my mobile menu. I’m using the slide animation for the submenus. Every time a user clicks on one of the parent links (which trigger the submenus), the entire container should change background color. If they click ‘back’, it should revert to white. The background color depends on the menu link — i.e. clicking ‘menu 1’ makes it blue, clicking ‘menu 2’ makes it red, etc.

    I hope that makes sense.

    Please let me know if you have a different approach.

    Thanks a bunch!

    #60321 Reply

    Hey Smith,

    Can’t you do this with just CSS, for example the below will set the backgrounds of the two sections separately:

    #responsive-menu-pro-item-4333 .responsive-menu-pro-submenu {
       background: blue !important;
    }
    
    #responsive-menu-pro-item-4368 .responsive-menu-pro-submenu {
       background: red !important;
    }

    The reason you won’t be able to do this currently is because of the e.stopPropagation(); calls in my plugins javascript. I have tried removing these in the past for this reason but it causes all sorts of other issues unfortunately.

    Nice menu by the way!

    Please let me know.

    Peter

    #60451 Reply

    Smith
    Participant

    Hello there,

    Thanks for the suggestion, but it isn’t exactly what I like.

    How can I disable the scroll for the page while the menu is displayed (mobile)? I cannot find the option to do so.

    Thanks!

    #60452 Reply

    Smith
    Participant

    Edit: I found the option to disable the scroll on mobile, but it’s not working. You can still scroll on the page. Could you please let me know how to fix it? Thanks!

    #60455 Reply

    Hey Smith,

    That is the correct option, what device are you using that you can still scroll on?

    Please advise

    Peter

    #60502 Reply

    Smith
    Participant

    Hello,

    I’m using iPhone 8 Plus and you can definitely scroll on the page. Not sure what may be the problem?

    #60505 Reply

    Hey Smith,

    There is a known issue with the noscroll library used on iPhone devices.

    I will see if I can find another library to use that supports iPhone better but unfortunately Apple devices are notoriously difficult for this kind of thing.

    All the best

    Peter

Viewing 13 posts - 16 through 28 (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