Hi there,
I am trying to get a dropdown/megamenu to show. I have it working on this site:
I have copied across the CSS and HTML structure, but for some reason, the megamenus are not appearing. I don’t think there is any JS involved, so not sure what I am missing.
This is the site that isn’t working:
Can anyone see what I have missed?
Basically the three navigation items on the left should show a mega menu.
Thanks!
The menu requires JS so you will need to look through ll those files and find it 
Thanks for the reply.
That’s odd as I don’t seem to have any JS.
This is the original you you guys helped me with:
I noticed it has popper.js which I have added to the new site, but the megamenus still don’t seem to work. I don’t get any console errors either 
Ok let me have another look when I get back to my desktop
I only looked at the original and I could see all the dynamic classes being added in devtools.
Back in a couple of hours unless someone else wants to jump in.
Ouch that was a lot to look through
finally realised the problem is that this page is using bootstrap5 and the old page used bootstrap4. The dropdown data-toogle attribute changed from this:
data-toggle="dropdown"
to this:
data-bs-toggle="dropdown"
If you update all the attributes it should work.
Hi there!
Sorry there was so much to look through! How did you work out that was wrong?
I have changed the instances to data-bs-toggle="dropdown" which now doesn’t make the main link go anywhere which is good as it doing that before, but the dropdown/megamenus still don’t seem to appear 
This is this is the updates site:
It looks like bootstrap expects the megamenu to be the next in sequence but you have a mobile menu in the way which gets shown instead (although you can’t see it).
In the old page you use some custom css using the open class but bootstrap 5 uses the show class instead.
This will show the menu:
.show ~ .dropdown-menu {
display: block;
}
The background colours are missing so you will have to find them again.
It would probably have been better if you duplicated the mobile anchor l,.nk and the mobile menu so that they sit together and then let the desktop and mega menus follow each other as they should. You can hide each in your media query. I need to look into a bit more but the custom css will get the menu showing at least.
Thanks for looking into that for me.
I have added this: .show ~ .dropdown-menu { display: block; }
But no luck.
Do I need to re-order my CSS or HTML, or both, so the mobile sit together?
Ah it works when I add an !important to the display: block
It works for me if I just copy your whole page and add that code.
However many of the styles for that megamenu are not in that page and I have added in the css panel the css from the other page:
e.g.
style.css?ver=6.6.1
It still needs work though.
Thanks, I’ve seen the get it to work now and just need to add the styles. seem to interfere with the other site that the menu works on.
I think other styles may be in the parent theme fine, but they didn’t. However for some reason the mobile menu isn’t working for me.
Could this be a toggle issue?
I don’t see the js for the hamburger toggle. Nothing happens in devtools but on the other site dynamic classes are added to the body tag.
I see, that make sense. I have checked the site that it is working on, but can’t see any reference to any JS and also in the files on the working site.
How would I find out what JS it is looking for and I can try to locate it?
Also, I mean as in which tools can I use? I use Inspector/console, but how would I find out what should be firing when it’s not? Are there any other tools I can use?
Debugging js tools are built into chrome but they do need to be learned first.
The problem is exacerbated when you have as many scripts as you have in that site.
I would look at the working site and try to identify the code that makes it work and then see if similar code is not present in the non working version.
When you copy and paste code from one application to another you should ensure they are both running the same framework versions to avoid these issues. You can’t really copy old bootstrap code to a newer version without some alteration.
I’ll try and have another look when I get back to the desktop later tonight.
Thanks
I have found out this this is the class that is applied when the mobile menu is open, so just doing some digging now
mobile-menu-open
Still no joy in finding this. I can see the mobile-menu-open is part of a frontend JS script, but is built into the theme, so I wouldn’t have touched that.
Any other suggestions?
Is there an example of this theme that I can look at where the toggle is working?
If all else fails you could write your own click handler for the hamburger to add the appropriate class but that would be a waste if its already baked in to the theme.
Ok, I found the following code in the working page of this site.
The frontend js file is this:
In that js are the routines for the hamburger.
o(".mobile-menu").click(function(e) {
e.preventDefault(),
o(".i-nav").addClass("mobile-menu-open").css("opacity", "1"),
o("body").addClass("disable-scroll")
}),
o(".mnh-close-icon").click(function(e) {
e.preventDefault(),
o(".i-nav").removeClass("mobile-menu-open i-nav-fixed"),
o("body").removeClass("disable-scroll"),
o(window).resize()
}),
Obviously that is part of a bigger file so you can’t add that snippet only.
However if I simply drop the whole frontend js into the page then the hamburger menu works.
(only testing the smaller screen version here)
Therefore you need to find out why you didn’t copy that code across and why your frontend js is completely different to the one in the working page.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.