Header spacing, menu font size, breadcrumb position and search icon background

Hello Woodmart team,

I’m currently fine-tuning the design of my website and I have a few questions regarding the header and some visual details. I’ve attached a private link to my staging website in the hidden field for reference.

Here’s what I’d like to adjust:

Header spacing:
There is a small white space between the top of the site content and the bottom of the header. I would like to remove this gap to make the layout more compact.

Menu font size & styling:
I’d like to increase the font size of the main navigation menu items in the header.
Is it also possible to slightly stretch the font vertically (increase height/line spacing or apply a transform) to improve readability?

Breadcrumb position on product pages:
On single product pages, the breadcrumb trail appears too far below the navigation bar. I’d like to move it closer to the top, right under the main navigation.

Search icon background:
I haven’t found where to change the background color of the magnifying glass icon inside the search bar. Could you tell me where this setting is located?

Thanks in advance for your support and guidance

Best regards,
Cédric M.
Responsable easychr.com

Hello,

01. You can find the option in the Advanced tab of Elementor to remove the white space: https://xtemos.com/docs-topic/top-and-bottom-paddings/

02. Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements to Main navigation links and change the font settings.
Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/

03. Please add the below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:

.wd-content-area > .single-breadcrumbs-wrapper {
    margin: -25px 0 0 40px;
}

04. Please add this code to the Theme Settings > Custom CSS > Global:

body .searchform .searchsubmit {
       background-color: #121111;
}

You need to replace the color code with the color you need.

Best Regards,

Hello Woodmart team,

Thank you again for your previous reply.

I’ve tried following your documentation and suggestions, but I still haven’t managed to remove the white line (1 to 2 pixels) that appears between the green navigation bar and the page content (on the homepage and category pages).

To be clear:
This is not general padding or spacing – it’s a thin white gap visible between the navigation area and the start of the content (title banner or page section), and it appears on all pages of the site.

I couldn’t find the exact setting to remove this, and none of the CSS codes I tried seem to affect it.

Would it be possible for you to guide me step-by-step on my specific setup to fix this?

I’ve created a private admin access to my site (staging version) and would be happy to share it with you so you can check directly and advise me on how to fix this visual issue.

Thanks a lot in advance for your support

Best regards,
Cédric M.

Hello,

This is not a space, this is a border width on your site. Navigate to WoodMart > Header Builder > Edit Current Header > Edit Header Bottom, and in the style tab remove the border width and check the issue.
https://ibb.co/pBW6CsxS

Best Regards,

[Author]

Posts