[Resolved] Bootstrap 3 not loading properly when logged out, causing site navigation issues

[Author]

Posts

[richardG-4]

When Toolset is active, and loading Bootstrap 3 or 4, the menu dropdowns and modal menu don't work on my site, but ONLY when a user isn't logged in: hidden link

So if you are logged in, the popup and menu dropdowns works, but if you aren't logged in, they don't load.

This is especially important on mobile, because right now they can't log in without the Elementor popup, since it has the login.

Solutions I've tried:
1. I've tried disabling other plugins and themes, that didn't seem to do anything.

2. I tried to change the settings to "Another plugin will load Bootstrap 3" and load it manually from the header, but then the CSS on other parts of my site, specifically the checkout fields, stop loading properly.

3. If I switch to Bootstrap 4, then my Shop page, which is running on Toolset, doesn't load properly.

I have a dev site we can experiment on if needed, I will link it below.

[richardG-4]

I just realized, it's actually worse than that. The dropdowns ONLY work if you're logged in as an administrator. I am emulating a customer's account, and there are no dropdowns in the menu.

[richardG-4]

I also checked Bootstrap 4, and that's not fixing the issue either. I disabled all custom code on Toolset, and everything except for Elementor, Elementor Pro, and Toolset Types, and CSS isn't loading the menu dropdown properly.

Marking "Another plugin or theme is loading Bootstrap 4" makes the popups work, but it still messes up the Checkout page. I also tested it on the Astra and Ocean themes, and the checkout page doesn't work on either.

I also referenced this ticket, and it didn't seem to help: https://toolset.com/errata/bootstrap-4-columns-classes-col-1-and-col-2-conflicts-with-woocommerce/

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

First, I apologize for the delay in getting back on this, as we had an unusually busy forum queue over the weekend.

When using a feature-rich page builder like Elementor and a theme like Astra, it is a good idea to not depend on the Bootstrap styles and scripts. This will limit the possibility of potential compatibility issues arising from the styles and scripts loaded through the page builder, theme, and even the WooCommerce plugin.

Can you switch the Bootstrap loading option to 'This site is not using Bootstrap CSS' and then test the various elements of the website?

If you feel you lack any styles or features without Bootstrap, let me know and I'll be able to suggest some workaround accordingly.

regards,
Waqar

[richardG-4]

Thank you, that seems to be the best option for me. I had to rebuild the Store and a few other pages, but I think it's going to be the best option.

The biggest workaround I'm struggling with is the Events page, but based on what you said, it sounds like I need to rebuild all my Views as Tables or unformatted lists.

I'll get started on that and let you know if I have any further questions.

Thanks,

Richard

[Waqar]

Hi Richard,

Glad I could help.

Please take your time and let me know if you have any follow-up questions.

regards,
Waqar