Use custom google searchbar.

[Niel]

That’s what i did, it had no effect at all. Is the css code right?

regards

[Anve S.]

Hi @niel96,

Install and activate ‘Simple custom css’ plugin and you will see custom css menu in backend .Add css overthere. The css might not be overriding from theme option panel.

Regards
Anve

[Niel]

Hi

i added this code to the plugin: custom simple css code. The problem is not solved.
What can i try more?

regards

[Niel]

I now see the css only changed the searchbar from the website on the normal version, not on the mobile version.

[Anve S.]

Hi @niel96,

Try adding following css in child theme’s custom css option.

@media screen and (max-width:847px) and (min-width:647px){
#header-search .tftextinput {
    width: 50%!important;
}
#header-search #tfheader #tfnewsearch .tfbutton {
    max-width: 38% !important;
}
}

Regards
Anve

[Niel]

Hi

i have add it but no positive effect.

regards

[Anve S.]

Hi @niel96,

I have checked your site and i don’t see any searchbar in mobile view. Can you please attach a screenshot of the screen that you are talking about .

Regards
Anve

[Niel]

Hi

it’s the same screenshot i have uploaded since it’s still the same problem. There is only a searchbar for logged in users on the boss theme.

regards

[Anve S.]

Hi @niel96 ,

I see that the google searchbar comes in mobile for logged in users . You can try following css to responsively design the searchbar in mobile view.

@media screen and (max-width:480px){
.mobile-header-inner #tfheader > form#tfnewsearch {
  margin-right: 16%;
  padding: 20px 7px!important;
  width: 60%;
}
.mobile-header-inner #tfheader {
  background-color: transparent !important;
}
.mobile-header-inner #tfheader .tftextinput {
  float: left;
  margin-right: 2%;
  width: 65%!important;
}
.mobile-header-inner .tfbutton {
  float: left;
  width: 32% !important;
  padding: 9px 8px!important;
}
}

Regards
Anve

[Niel]

Hi

This didn’t work 🙁

Regards

[Anve S.]

HI @niel96,

Checked on your site , the css is not even applied .Please check uploading it through simple custom css.

Regards
Anve

[Varun Dubey]

Hi @niel96
I have checked your site and css is not getting applied on your site. Please send your login details from our contact page https://www.buddyboss.com/contact/ and we will add correnspodning css.

Regards
Varun Dubey

[Niel]

Ok thank you have send the details.

[Anve S.]

HI @niel96,

Please check you site .we have made the changes and now it looks proper on mobile .

Regards
Anve

[Niel]

Thanks problem is solved now.