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 16, 2019 at 8:59 pm #66997Hannah SmithParticipant
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. 🙂
June 16, 2019 at 9:14 pm #66996Peter FeatherstoneParticipantHey 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
June 16, 2019 at 9:20 pm #66995Hannah SmithParticipantThe 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.
June 16, 2019 at 9:58 pm #66994Peter FeatherstoneParticipantHey 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
June 16, 2019 at 10:20 pm #66993Hannah SmithParticipantHey 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!
June 17, 2019 at 8:24 am #66992Peter FeatherstoneParticipantHey 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
June 17, 2019 at 11:27 am #66991Hannah SmithParticipantHey 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!
June 18, 2019 at 7:51 am #66990Peter FeatherstoneParticipantHey 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
June 20, 2019 at 8:05 pm #66989Hannah SmithParticipantHello 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!
June 20, 2019 at 8:11 pm #66988Hannah SmithParticipantEdit: 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!
June 20, 2019 at 11:41 pm #66987Peter FeatherstoneParticipantHey Smith,
That is the correct option, what device are you using that you can still scroll on?
Please advise
Peter
June 21, 2019 at 8:18 pm #66986Hannah SmithParticipantHello,
I’m using iPhone 8 Plus and you can definitely scroll on the page. Not sure what may be the problem?
June 21, 2019 at 9:06 pm #66985Peter FeatherstoneParticipantHey 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
-
AuthorPosts
- The topic ‘Choose different menu for mobile’ is closed to new replies.