Header Adjustment

Hi,

I would like to add a full width element created with html block in header just below the main menu and i can’t do it.

Here is what i want to achieve: https://ibb.co/sFR82hy
Just under the main menu, there is a full width element with few features.

This is how my current header looks like: https://ibb.co/7bcVj06
Just under the main menu, i would like to add the full width html block that i create with elementor (https://ibb.co/MCJzGm5). In the example photo there are 4 rows in header, but in woodmart there are only 3 rows with top bar, main header and header bottom.

How I can do this? I need to find a solution.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached.

Sorry but the default header of woodmart has 3 rows and there is no option that you can add 4 rows to it.

It requires customizations and this is beyond our limitations and support policy.

Best Regards.

Hi and thanks for your reply.

We can’t add it in the same row that main menu is (bottom header) and appear just below the main menu in front end (full width)?

I guess this is easy to be done with some css.

Hello,

If you try adding it to the same row in which the main menu is then you cannot make it full width as the block will be within the width of the container.

And if we try using CSS then it will affect the whole row.

Regards.
Xtemos Studios

I re create the header as you can see from the image attached, but the problem is now with the shopping cart icon and account icon in top bar that seems too small compare to how it was looking in main header. Only these two icons. Also the account icon dropdown its difficult to navigate because the dropdown appear in left and not center just below the account icon.

I already share the login details to my first message.

Thanks!

Attachments:

You must be logged in to view attached files.

In sticky header for example, the account icon and shopping cart look good and in the proper size

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached.

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

For the icons sizes:

.whb-top-bar .wd-tools-element .wd-tools-icon:before {
    font-size: 20px;
}

For the My Account Dropdown:

.whb-col-right .menu-simple-dropdown .sub-menu-dropdown {
    margin-left: 200px;
}

Regards.
Xtemos Studios.

Hi, and thanks for your reply.

It seems to work, but the only issue now is the small total amount that appears next to the shopping cart icon.

Check the screenshot attached.

For what reason this happen? I only move the icons from main header to top header.

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.whb-top-bar .woodmart-shopping-cart .woodmart-cart-subtotal .amount {
    font-size: 18px;
}

.whb-top-bar span.woodmart-cart-number {
    font-size: 18px;
}

Regards.
Xtemos Studios.

It seems to work fine!

Thanks for your help!

Hello,

We are thrilled that you loved your experience with XTEMOS, We put customer experience and satisfaction as our priority, and your words reaffirms the hard work we put in every day. So thanks for your kind words and we look forward to seeing you again.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts