The issue you're facing is a classic CSS "specificity" conflict. By targeting the general li tag, your code is catching every list item on the site, including the ones Salient uses to build its tab navigation.
You can solve this by using more "surgical" selectors that distinguish between a standard text list and a functional theme element like a Tab bar.
The Surgical CSS Fix
Please replace your current list CSS in Salient > General Settings > CSS/Script Related > Custom CSS Code with this version:
/* 1. Target ONLY standard bullet points in your content areas */
.main-content ul:not(.wpb_tabs_nav) li,
.wpb_text_column ul li {
padding-bottom: 18px !important;
}
/* 2. Target ONLY the Salient Tab navigation items */
.wpb_tabs .wpb_tabs_nav li {
padding-bottom: 0px !important;
}
The :not Selector: By using .main-content ul:not(.wpb_tabs_nav) li, we tell the browser to apply the 18px padding to every list except those that are part of the WPBakery/Salient tab navigation.
Hi - I'm running into a problem with my custom CSS for the tabbed li bottom padding. I have it set at 0px which looks perfect. (About our Chapter)
But I also want to have the general text bullet to have a li bottom padding of 18px (home page). When I add that CSS is affects the tabs.
Any ideas on how to keep the 2 separate?
Thank you.
Pete
Hello Pete!
Thanks for writing in!
The issue you're facing is a classic CSS "specificity" conflict. By targeting the general li tag, your code is catching every list item on the site, including the ones Salient uses to build its tab navigation.
You can solve this by using more "surgical" selectors that distinguish between a standard text list and a functional theme element like a Tab bar.
The Surgical CSS FixPlease replace your current list CSS in Salient > General Settings > CSS/Script Related > Custom CSS Code with this version:
/* 1. Target ONLY standard bullet points in your content areas */ .main-content ul:not(.wpb_tabs_nav) li, .wpb_text_column ul li { padding-bottom: 18px !important; } /* 2. Target ONLY the Salient Tab navigation items */ .wpb_tabs .wpb_tabs_nav li { padding-bottom: 0px !important; }The :not Selector: By using .main-content ul:not(.wpb_tabs_nav) li, we tell the browser to apply the 18px padding to every list except those that are part of the WPBakery/Salient tab navigation.
Let us know if this works.
Best,