- This topic has 5 replies, 2 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
November 20, 2019 at 4:17 am #1068239FunkyCss
Hallo , how can i create this to my header search bar ( hided link )
is possible ?
November 20, 2019 at 8:53 am #1068701DavidStaffCustomer SupportHi 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>
November 21, 2019 at 12:08 am #1069761FunkyCssHi David it says there is an error on the html widgets
November 21, 2019 at 12:08 am #1069763FunkyCssOk the viewBox should be lowercase viewbox! and it works !
November 21, 2019 at 12:28 am #1069786FunkyCssDavid 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;
}
}November 21, 2019 at 7:00 am #1070751DavidStaffCustomer SupportThis 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.