Add search icon to mobile side menu

This topic has 13 replies, 3 voices, and was last updated 5 years, 5 months ago by Aizaz Imtiaz Awan.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
September 27, 2019 at 12:46 pm #147040

horny_fungus
Participant

Hi, in mobile side menu search form has “search for products” text but it’s rather imperceptible for customer. Is it possible to add a non-clickable search icon to the form to make it more notable?

September 27, 2019 at 1:34 pm #147062

Aizaz Imtiaz Awan
Keymaster

Hello,

Sorry it is not possible to disable the search icon so it is not clickable. Also currently there is no such option to replace the search icon with an icon which is not clickable.

It requires customization and this is beyond our limitations and policy.

Best Regards.

September 27, 2019 at 1:41 pm #147065

horny_fungus
Participant

Maybe you misunderstood me. I just want to add icon. I suppose this is possible because I’ve seen it on screenshts on this forum. Please check image below

Attachments:
You must be logged in to view attached files.

September 27, 2019 at 2:17 pm #147073

Aizaz Imtiaz Awan
Keymaster

Hello,

By default the search icon is already there. Due to your custom css code the icon goes hidden. When i remove your css code for testing the search icon shown.

Kindly remove your custom css code from Global Custom CSS to fix the issue.

Best Regards.

September 27, 2019 at 3:25 pm #147085
horny_fungus
Participant
Thank you. You’re right. This is due to this CSS:
```
/*Set search form on 404 page to white*/
body .woodmart-search-form input[type=text] {
    border: 2px solid #ffffff;
}
body .searchform .searchsubmit {
    border-left: 1px solid #ffffff!important;
    color:#ffffff;
}
```
I was given this code by Woodmart support when I asked for help due to another issue – although my site uses white text by default, for some reason search form I added on 404 page was grey. So if I remove the code this search form becomes grey, please provide some solution.
September 28, 2019 at 7:01 am #147177
Aizaz Imtiaz Awan
Keymaster
Most Welcome,

As you want to display the search form of 404 page as white and also the search form of mobile menu with grey icon. You can use the below css in Theme Setting >> Custom CSS >> GLobal CSS section:
```
/*Set search form on 404 page to white*/
.page-id-2503 .woodmart-search-form input[type=text] {
    border: 2px solid #ffffff;
}
.page-id-2503 .searchform .searchsubmit {
    border-left: 1px solid #ffffff!important;
    color:#ffffff;
}
```
Screenshot of the search in the mobile menu: https://jmp.sh/CLzgsci
Screenshot of the search in the 404 page: https://jmp.sh/CsFXRHW

Best Regards.
September 28, 2019 at 10:51 am #147228

horny_fungus
Participant

Thanks. That code makes search icon white, but it doesn’t work for “search for products” text inside the frame. Orginal sitewide code doesn’t work as well, but it used to some time ago. Can you please provide me with code to make this text white.

September 28, 2019 at 11:50 am #147234
Aizaz Imtiaz Awan
Keymaster
Hello,

To change the input text color as well as placeholder color to white in the 404 page of your site. You need to replace the below code with the prior one:
```
/*Set search form on 404 page to white*/
.page-id-2503 .woodmart-search-form input[type=text] {
    border: 2px solid #ffffff;
	color:white;
}

.page-id-2503 .searchform .searchsubmit {
    border-left: 1px solid #ffffff!important;
    color:#ffffff;
}

.page-id-2503 .woodmart-search-form input::placeholder {
    color: #ffffff;
}
```
Screenshot of placeholder as white: https://jmp.sh/NX7yCRO
Screenshot of input text color as white: https://jmp.sh/qzHwE34

OR

In case you have used that search on multiple pages. Then just change color of search icon and text for the navbar using the below code and remove the prior code:
```
.mobile-nav .searchform .searchsubmit{
    color:yellow;
}

.mobile-nav .woodmart-search-form input[type=text] {
    color: yellow;
}

.mobile-nav .woodmart-search-form input::placeholder  {
    color: yellow;
}
```
I used yellow color just to set an example for you. You can use any other color.

Best Regards.
September 28, 2019 at 3:38 pm #147264

horny_fungus
Participant

Thanks, second solution worked for me so far. I’ll be testing it to check that nothing has changed in other places 😉
I found one more problem related to this search form – if search query gives rather big number of results making drop down long enough it is being cut by next row. Something is wrong with z-index.

September 29, 2019 at 7:45 am #147317

Artem Temos
Keymaster

Please, provide us a screenshot of this problem for better understanding.

September 29, 2019 at 8:54 am #147331

horny_fungus
Participant

https://prnt.sc/pce87i

September 29, 2019 at 1:04 pm #147379

Artem Temos
Keymaster

Try to edit the row that contains this element with WPBakery page builder and check “overflow:hidden;” option.

September 29, 2019 at 1:19 pm #147381

horny_fungus
Participant

Thanks, that helped.

September 30, 2019 at 5:47 am #147441

Aizaz Imtiaz Awan
Keymaster

Hello,

I’m so happy to hear you are pleased with the Theme and Support. XTemos strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.
Author

Posts