Header menu not scaling

Our site is still under development. I went to the dev site for the first time tonight and found that the header is not scaling properly to smaller screens. The rest of the site scales down correctly, but the header does not. Please see attached screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

see private message

Hello,

I had a look at your header setup, and it appears that the issue is due to the number of elements you’ve added to the header. This results in the menu not scaling properly due to the limited header width. To improve this, I recommend moving the menu to the bottom of the header.

Best Regards

Ok I can make that work. But why is the bottom header overlapping with the hero image. Also how do I control the width of the search bar in the main header, its way to long now. I see in the settings I can control the height but not the width?

Hello,

01. Navigate to WoodMart > Header Builder > Edit Current Header > Edit Header bottom and increase the header height.

02. Navigate to WoodMart > Header Builder > Edit Current Header > Configure search element and choose the search display.

Best Regards

For the search bar, I have the style set to form. On the style tab I am able to control the height of the search input bar but I can not control the width. If I cant do this in the interface, where can I set this in the code?

Attachments:

You must be logged in to view attached files.

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section:

.whb-9x1ytaxq7aphtb3npidp .searchform {
   width:180px;
}

[class*="wd-header-search-form"] input[type='text'] {
    min-width: 110px !important;
}

Best Regards

[Author]

Posts