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

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

  • Avatar: Amit_Kumar
    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.

    5 Answers
    Avatar: Amit_Kumar
    Amit Kumar
    Participant
    April 4, 2019 at 18:50

    m

    Avatar: Amit_Kumar
    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;
    }

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    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

    Avatar: Amit_Kumar
    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.

    Avatar: Eva
    Eva Kemp
    Support staff
    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

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.