increase width of Icon search bar

Hi @casahova,

You can force a wider search box with the following CSS code:

.dgwt-wcas-search-wrapp {
  min-width: 600px !important;
}

You can change the 600px to a different value.

To apply the CSS code, go to Appearance –> Customize –> Additional CSS.

I hope this is helpful!
Regards,
Marta

hi marta,

Thank you for the code. There is a slight problem though.. it shifts my other widget and main menu to the left. When I keyed in a higher px, the alignment goes way off. Any way the icons will stay root in place while the width of the bar increases when the fibo icon is clicked?

Thanks.

Hello,

Can you provide your site address so we can check?

Best regards,
Clint

Hi sure,

https://www.casahova.com/

Thanks.

Hello,

Is this for the desktop view? It seems to be displayed nicely with the other elements on the header. Please try to view in incognito mode.

https://prnt.sc/181qlpb

Hello,

yes its desktop view. The screenshot u have shown is without the code given right? Because that is how it is before the code is inputted. I wanted that bar to be wider alittle more, but after inputting the code, u may now view my website again . The result is not pleasing.

hi,

any solution?

Hi @casahova,

Could you try the following CSS code:

@media screen and (min-width: 1480px) {
html:not(.dgwt-wcas-overlay-mobile-on) .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon .dgwt-wcas-search-form {
  min-width: 1200px !important;
  left: -1050px !important;
}
}

Also, you may change the icon color with:

.dgwt-wcas-ico-magnifier-handler {
  color: #dd9933 !important;
}

Let me know if this works for you.

Regards,
Marta