searchbar smaller

Hi,

How can i make the searchbar smaller on the header? It takes now the column of the piece of the header.

Hello,

There are two ways:

1. Try to add an empty space element on both sides.

2. Or try changing rows flex layouts, here you will find the instruction: https://xtemos.com/docs/woodmart/header-builder/header-rows-flex-layouts/

Best Regards

No, both points you give don’t work. When I make the browser smaller (responsive) I see the logo move to the right instead of having to stay centered and that is because of the SPACE I added next to the search bar.

Is there no other option I have attached my login details.

[Aizaz Imtiaz Awan]

Hello,

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

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

You can change the width as you need.

Best Regards

• This reply was modified 2 years, 7 months ago by Aizaz Imtiaz Awan.

[lucky7seven]

I can’t change the width, it doesn’t change if I change the ..px. And the logo is now next to the search bar even though they are both in a separate column. And when i put a SPACE in again have the issue that the logo no longer is centered when responsive.

• This reply was modified 2 years, 7 months ago by lucky7seven.

Hello,

The flex column will determine the width of the column by detecting the elements in it. If you don’t want to use flex columns then you can add empty space.

The last thing is adding width manually for the search bar using the CSS i provided.

.wd-search-form[class*=”wd-header-search-form”] input[type=’text’] {
min-width: 220px;
}

And it is not the standard way of checking the Responsiveness by simply changing the browser size. Please try using some online tool like Responsinator to check the Responsiveness.

Best Regards

I haven’t changed anything I now suddenly see that my LOGO is no longer visible in the header?

Hello,

I have visited your website.

It seems that file_get_contents function for URLs is disabled on your server.
You need to contact your provider and ask to enable this option.

Best Regards

Why is it so complicated to get the logo in the middle. I have asked my provider and for that I have to take a VPS SERVER for something small. Is there no other option?

Why is it so complicated to get the logo in the middle. I have asked my provider and for that I have to take a VPS SERVER for something small. Is there no other option?

I have put your logo (woodmart) back and that works.

Can you please make sure that the search bar is a bit smaller, I’ll arrange the rest with the logo myself

Hello,

You are using a logo in SVG format that’s why you need to enable the option. You can try using png format instead.

I have reduced the width of the search bar on your website. Please clear cache and check back.

Best Regards

[Author]

Posts