Custom Header Width + Padding

Hi,

I can’t figure out how to make the header a custom size. My site shows content at 75% of the screen size, as can be seen from the Hero section. How can I set a custom size for the header and make the content 75% width?

I also have a space between the header and Elementor section of 40px. I also have the same at the bottom of the page before the footer. I can remove it with CSS, but to be tidy I would like to find the setting in WoodMart and remove it.

.wd-content-layout {
padding-block: 40px;
}

Thanks, Kelvin

Attachments:

You must be logged in to view attached files.

Hi,

Our theme does not have a universal option to remove the padding from the wd-content-layout wrapper. This is because, depending on the page type (homepage, blog archive, post, shop page, single product, cart, etc.) and page settings (layout builder, page title, custom background, product categories, overlap header, checkout steps, etc.), removing this padding could cause layout issues and also confuse users in cases where the missing padding cannot be adjusted through page builder content settings.

If you have set a background for your content using a page builder plugin, and it does not align properly with your header/footer on a specific page, we recommend adjusting it using the available page builder options.

In your case, go to the settings of your first Elementor container, select the “Advanced” tab, and set -40 in the margin-top field as shown in this screenshot: https://monosnap.com/file/nvzU6CfOD69rMSozqNG0Qv6K7dQY6R. Similarly, you can select the last container and set margin-bottom: -40px to achieve the desired alignment.

Kind Regards

Thanks for you reply. I will adjust in Elementor.

For my first question, how do I adjust the header width to make it 75%?

Thanks, Kelvin

By default, without considering additional page builder settings, the width of all site content, including the header and footer containers, is controlled by a single option in Theme Settings called Site Width (https://monosnap.com/file/RrluppOz5gjneMU8cgqtVqTaWCAXpl).

This option only sets the width in pixels and does not support percentage values, as a relative width would make the content too narrow on mobile devices and laptops with smaller screens.

If you want to customize the header content width to your own value, you can do so using the following custom CSS:

.whb-main-header .container {
    max-width: calc(75% + 30px);
}

You can adjust the 75% values according to your preferences. Let us know if you need further assistance!

Kind Regards

Thanks for that.

For Mobile view, is it possible to have the header top bar in 2 or 3 columns?
I’m trying to achieve the same as the image attached.

Best,
Kelvin

Image attached

Hi,

Attach the picture again, please.

Regards.

Image attached again.
Thanks

I’m not having much luck with this.
Image attached again.
If it doesn’t work this time. It’s the top bar at test.infatot.com that I’m trying to achieve.

Attachments:

You must be logged in to view attached files.

Unfortunately, you cannot add three columns in the mobile version of the header. However, you can create the new HTML block and then set any content in it with any number of columns as per your requirements then you can set it to your header.https://take.ms/uYi9Y

Best Regards

[Author]

Posts