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 5 months, 3 weeks ago.

Viewing 13 posts - 16 through 28 (of 28 total)
  • Author
    Posts
  • #66997
    Hannah Smith
    Hannah 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. 🙂

    #66996
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #66995
    Hannah Smith
    Hannah 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.

    #66994
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #66993
    Hannah Smith
    Hannah 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!

    #66992
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #66991
    Hannah Smith
    Hannah 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!

    #66990
    Peter Featherstone
    Peter Featherstone
    Participant

    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

    #66989
    Hannah Smith
    Hannah 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!

    #66988
    Hannah Smith
    Hannah 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!

    #66987
    Peter Featherstone
    Peter Featherstone
    Participant

    Hey Smith,

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

    Please advise

    Peter

    #66986
    Hannah Smith
    Hannah Smith
    Participant

    Hello,

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

    #66985
    Peter Featherstone
    Peter Featherstone
    Participant

    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)

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