[Resolved] Change Search Widget with an icon

Home Forums Support Change Search Widget with an icon

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1068239
    FunkyCss

    Hallo , how can i create this to my header search bar ( hided link )

    is possible ?

    #1068701
    David
    Staff
    Customer Support

    Hi there,

    tricky to add icons to a Search input field.
    You could create your own search form and use a HTML widget, this will get you started, i added the GP icon SVG to the button:

    <form method="get" class="custom-search-form" action="site-url">
        <label>
            <span class="screen-reader-text">Search for:</span>
    
            <input type="search" class="search-field" value="" name="s" title="Search for:" placeholder="search">
            <span class="border"></span>
        </label>
        <button type="submit" class="search-submit">
            <svg viewbox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
            </svg>
        </button>
    </form>
    #1069761
    FunkyCss

    Hi David it says there is an error on the html widgets

    #1069763
    FunkyCss

    Ok the viewBox should be lowercase viewbox! and it works !

    #1069786
    FunkyCss

    David i had previously this code for displaying flex on header and now that i have changed the widget with the custom one should i change the class ? wpml widget was left logo center and search form right


    @media
    (min-width: 769px) {
    .inside-header {
    display: flex;
    min-height: 120px;
    }
    .header-widget {
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: center;;
    }
    .header-widget .widget.widget_search {
    order: 5;
    margin-left: auto;
    }
    .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    }
    }

    #1070751
    David
    Staff
    Customer Support

    This part of your CSS:

    .header-widget .widget.widget_search {
        order: 5;
        margin-left: auto;
    }

    Change to:

    .header-widget .widget.widget_text {
        order: 5;
        margin-left: auto;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.