0

I'm having a problem with the dropdown menu in my Joomla 4 site. I think there's some sort of Javascript conflict that's causing it, and I'm hoping someone smarter than me can help pinpoint it.

The weird thing is, I have the site uploaded to two different web hosting accounts. On one of them, it works correctly, and on the other, it doesn't.

The dropdown menu system has parent items and child items. The problem is this: If you are currently on the page of a child item (an individual product page), then clicking on any parent item in the dropdown menu does nothing, when it should take you to that page.

Here is an example page where everything works as intended. On this page, you CAN visit the Products index page by clicking on "Products" in the top menu bar.

Now, here is the same page on a different hosting account where the problem occurs. On this page, you CANNOT visit the Products page by clicking on "Products" in the top menu bar. Unfortunately, this is the final home for the website, so I need to get this one working like on the other account.

Can anyone help?

1
  • I think I've discovered the culprit: On the broken site, there are a lot of Bootstrap components loading that I didn't explicitly tell the website to load. The dropdown.min.js file in particular is what seems to be causing the conflict. When I disable that file, the problem goes away. The question remains, though: why are all those Bootstrap files loading on one site, but not the other? I only told the site to load tab.min.js and collapse.min.js.
    – Kris Hunt
    Commented Feb 9 at 21:47

1 Answer 1

1

Your menu is built using Bootstrap's Dropdown component. Its dropdowns are triggered by clicking. You have added some custom that shows the dropdowns on hover. If you want to disable click behavior, remove data-bs-toggle="dropdown" attribute from your menu layout. But you should note that hover behavior results in poor usability on touchscreen devices.

4
  • That is very helpful. I used Chrome devtools to remove that attribute from one menu item, and the item became clickable. So then I added this line of jQuery to my template's custom dropdown code: jQuery('.navbar .parent > a').removeAttr('data-bs-toggle'); and that works, but it would probably be a better idea to make a template override to do it. I can't seem to find where that code is, though. And yes, I understand about the touchscreen device issue; that has already been addressed.
    – Kris Hunt
    Commented Feb 12 at 17:23
  • Ah! I have found the file to override at mod_menu/default_component.php. Thank you very much! One thing I'm still confused about: I tried removing all my custom dropdown javascript,and enabling dropdown.min.js to let dropdowns work as intended (on click). The dropdowns opened on click, but the parent menu items still weren't clickable — until I removed the data-bs-toggle attribute. Why would that be?
    – Kris Hunt
    Commented Feb 12 at 17:57
  • Multi-level dropdowns are not supported. You will need custom code to show subcategories.
    – Sharky
    Commented Feb 13 at 9:50
  • I'm saying that, despite the fact that my site has multiple levels of subcategories, even when I tried to do a basic dropdown that opens on click — not a multi-level one — even that didn't work until I removed data-bs-toggle.
    – Kris Hunt
    Commented Feb 13 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.