Sometimes StoreRocket's widget and your website's CSS don't play nicely together. The widget might overlap your navigation, sit behind other elements, or have weird spacing. Here's how to fix common conflicts.
Widget overlapping your site's navigation
If the widget (especially map controls or the floating button) appears on top of your site's header, sticky nav, or other elements:
Fix: Add this to your website's CSS (not StoreRocket's Custom CSS):
.your-header-class {
z-index: 99999;
position: relative;
}Replace .your-header-class with your actual header's CSS class. This pushes your header above the widget's elements.
Widget sitting behind other page elements
If the widget is partially hidden behind other content:
Fix: Make sure the widget's container isn't inside an element with overflow: hidden. The widget needs room to expand. Try removing overflow: hidden from the parent container, or move the embed code outside of that container.
Large empty space above or below the widget
This usually happens when the widget container has a fixed height that doesn't match the widget's content.
Fix: Remove any fixed height on the widget container. The widget should determine its own height. If you need a minimum height, use min-height instead:
#storerocket-widget {
min-height: 500px;
height: auto;
}
Widget not full width inside a page builder
Page builders like Elementor, Divi, Beaver Builder, and Webflow often wrap content in containers with max-width and padding.
Fix:
Elementor: Place the HTML widget in a "Full Width" section, not inside a column
Divi: Use a "Full Width Code" module
Webflow: Place the embed outside of a Container element, directly in a Section
WordPress: Use a full-width page template
Navigation dropdowns appearing behind the widget
If your dropdown menus go behind the map:
Fix: Increase the z-index of your navigation to be higher than the widget:
.your-nav-class {
z-index: 100000;
position: relative;
}
Google Maps controls overlapping your site
Google Maps renders its own controls (zoom buttons, street view, etc.) with high z-index values (up to 1,000,002). These can escape the widget container and overlap other page elements.
Fix: Add isolation: isolate to the widget container:
#storerocket-widget {
isolation: isolate;
}This creates a new stacking context that contains all z-index values within the widget.
How to debug CSS issues
Right-click the problem area and select Inspect (Chrome/Firefox)
Look at the Computed tab to see which CSS properties are applied
Check for conflicting
z-index,overflow,position, andheightvaluesTest changes in the browser inspector before adding them to your site's CSS
Questions? Hit us up on live chat with a screenshot and your widget URL.