Adding search bar to header

Hi,

Thanks for contacting us and sorry for the late reply!

Please change following code

#header .widget {
    width: 100%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
}

into following one

#header .widget {
    width: 300px;
    position: absolute;
    top: 5px;
    transform: none;
    left: 25px;
}

If you are not happy with the result, please post a screenshot and show the changes you would like to make. You can upload your screenshots on imgur.com and post the links here :)

Best regards,
Yigit

Hi Alex,

Please add following code to Quick CSS as well

#header #woocommerce-product-search-field-0 {
    width: 75%;
    float: left;
}

Best regards,
Yigit

Hi,

I just checked your website but search bar in header is clickable on my end. I attached a screenshot in private content field below.

Have you figured it out already? If not, could you please elaborate on the issue you are having? :)

Best regards,
Yigit

Hi,

I checked on desktop from 2560px down to 990px but both search bar and button works for me.
Are you having the issue on specific width or browser?

Best regards,
Yigit

Hi,

The input field is only clickable within the lower portion and it seems like there is something covering the upper area, but we cannot find it in the document, which is odd. It works when the screen width is lower than 989px.

Temporarily, you may want to consider removing the search widget and enable the default search icon instead.

Best regards,
Ismael

Hi,

It took us a while but we have found out that the top bar or the phone info container is blocking the input field. To fix that, we have to add a space in the top area of the main header and move the widget down a bit. Please add this css code.

.html_header_top.html_bottom_nav_header #header_main {
    z-index: 3;
    padding-top: 15px;
}

#top .widget_product_search.widget {
    margin-top: 15px;
}

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Thank you for your patience.

Best regards,
Ismael

Hi,

Glad Ismael could help!
Let us know if you have any other questions and enjoy the rest of your day!

Best regards,
Yigit