Topbar button gap

Hi,

I’m trying to adjust the spacing around a button in the header’s top bar, but I can’t seem to find an option for this in the Header Builder or Theme Settings.

While inspecting the element, I found that the spacing appears to come from this CSS rule:

.whb-column > .wd-button-wrapper {
padding: 10px;
}

I can override this using Additional CSS, but I’d prefer to use a built-in WoodMart setting if one is available.

Is there a setting in the Header Builder or Theme Settings that allows me to control the padding or spacing of buttons within a header column?

Thanks in advance!

Hello,

There’s no built-in setting for this. Neither the Header Builder Button element nor Theme Settings has an option to change the padding around a button in a header column. The spacing comes from the theme’s default styles, so the way to change it is with custom CSS.

If you only want to change the buttons in the top bar, you can use a rule like this:

.whb-top-bar .whb-column > .wd-button-wrapper {
 padding: 0 5px; 
}

Change the value to the spacing you want. You can add it under Theme Settings > Custom CSS.

If you need extra space between the button and another header element, you can also add the Space element in the Header Builder and set its Space width.

Best Regards,

[Author]

Posts