Skip Navigation

[Resolved] Qode Slider conflict with Bootstrap on parallax site

This thread is resolved. Here is a description of the problem and solution.

Problem: I am using a Qode Slider on a parallax-style site to display an image gallery. When I scroll past the gallery, I see blank space beneath it with Toolset active.

Solution: This conflict is between Bootstrap and Qode Sliders. Both use the CSS class "carousel", and the positioning styles clash. The two options are:
1. Disable Bootstrap in Toolset > Settings > General
2. Add overriding CSS to fix the positioning of carousel items in a Qode Slider:

.q_slider_inner .carousel-inner {
  position: fixed;
}
This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by leilaG 6 years, 5 months ago.

Assisted by: Christian Cox.

Author
Posts
#589893
slider-toolset-plugins-de-activated.jpg
slider-toolset-plugins-activated.jpg

hidden link - Slider on home when scrolling up reveals empty grey space.

When I deactivate the Toolset plugins in the staging area this issue is resolved - hidden link

Could you please investigate and see if there is some code that we can add to the home page to resolve this issue.

Thank you!

#589977

Hi, it appears to be caused by the inclusion of the Bootstrap library. The custom image slider implemented in the top section of the site uses some CSS classes that are identical to those used by Bootstrap, and you're seeing some unavoidable CSS conflicts. Are you using Bootstrap in other areas of your site? If not, you can go to Toolset > Settings > General and turn off Bootstrap altogether. If you are using Bootstrap elsewhere, you can add this custom CSS override that targets carousel items within the q-slider:

.q_slider_inner .carousel-inner {
  position: fixed;
}
#590141

That worked!! Thank you for your help and support

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.