If you’re using the Greenshift carousel module, you may have noticed that the active navigation dot is elongated into an oval shape by default. While some users may like this effect, others might prefer uniform navigation dots. Unfortunately, Greenshift doesn’t provide an option to modify this within the settings.
Luckily, you can easily fix this with a simple CSS snippet. This will make the active dot the same size as the other dots, ensuring a cleaner and more consistent appearance.
Default Greenshift Carousel Dot Styling
By default, Greenshift applies the following CSS to the active navigation dot:
.gspb_slider-id-gsbp-8c70b46b-f420 .swiper-pagination-bullet-active {
width: 24px;
}This causes the active dot to stretch, making it visually different from the inactive dots.
CSS Snippet to Fix the Active Dot Size
To keep the active dot the same size as the others, add this CSS snippet inside the module’s Custom CSS settings:
.swiper-pagination-bullet-active {
width: 8px !important;
}You can adjust the 8px value as needed to match your preferred dot size.
Here’s the “Greenshift” version with the {CURRENT} selector that helps target only the module its inserted into.
{CURRENT} .swiper-pagination-bullet-active {
width: 8px !important;
}How to Apply the CSS
- Open the Greenshift Carousel Module where your slider is configured.
- Locate the Custom CSS settings within the module.
- Paste the CSS snippet above into the module’s CSS editor.
- Save your changes and refresh the page to see the effect.
Final Thoughts
This simple tweak ensures a uniform appearance for the navigation dots in your Greenshift carousel, offering a cleaner and more professional look. If you have any other Greenshift customizations you’d like to share or need help with, drop a comment below!