Return to previous page

Replace the word “search” with the “magnifying glass” icon

This topic has 6 replies, 3 voices, and was last updated 5 years, 10 months ago ago by Eva Kemp

Amit Kumar

Participant

April 4, 2019 at 18:50

I want to replace the word “search” with the “magnifying glass” icon.
and also want to add search in sticky-header + please also tell me how to make a sticky header.

and on mobile version how to add more icon like my account icon and search box and icon.

#212022 Copied Theme version: 5.1.1

5 Answers

Amit Kumar

Participant

April 4, 2019 at 18:50

m

#212023 Copied

Amit Kumar

Participant

April 5, 2019 at 08:25

solved

REPLACES
———————–
SEARCH text with icon
———————–
file path: /wp-content/themes/xstore/woosearchform.php
======================================================

.header-search.act-default [role=”searchform”] .btn {
position: absolute;
top: 0;
right: 0;
font-family:arial;
font-weight: 600;
font-size: 13px;
height: 100%;
width:6em;
line-height: 1em;
padding: 4px;
color: #ffffff;
text-transform: capitalize;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}

#212033 Copied
Olga Barlow

Participant

April 5, 2019 at 13:17
Hello,

We are glad that you sorted out but we would recommend you to reduce the number of styles because you just repeat them. There is no need to add position absolute because it was already added in style.css of the parent theme, add only changed and additional rules. So custom should be

.header-search.act-default [role="searchform"] .btn { font-family: arial; font-weight: 600; font-size: 13px; padding: 4px; color: #fff; text-transform: capitalize; border-bottom-right-radius: 4px; border-top-right-radius: 4px; }

Regards
#212041 Copied
Amit Kumar

Participant

April 6, 2019 at 08:30

thank you..
I want to add a search option in sticky-header as well as my header is not sticky right now. when I scroll up it appears it.

#212057 Copied

Eva Kemp

Participant

April 6, 2019 at 08:40

Hello,

There is no such option by default it’s possible to implement only by the additional customization. Submit customization request to customization team https://wpkraken.io/?ref=8theme
Regards

#212059 Copied
Viewing 6 results - 1 through 6 (of 6 total)