Adding a search icon to header

Adding a search icon to header

ForTheArtists
Visitor
3 0 0

Hi, I'm struggling to add a search icon to my header and cant seem to get the code right. On a custom theme I got from a shopify group, it has part of the code in the theme for search icon on header but for some reason cannot get it to come up how I want, looking to try get it like the dawn theme where the search bar comes up after the search icon is clicked. Cheers 

Replies 2 (2)

ForTheArtists
Visitor
3 0 0

Theme.scss

 

/// Layout

.site-header__cart,
.site-header__search,
.site-header__account {
position: relative;
}

.site-header__search {
.no-svg & {
display: inline-block;
}

&.site-header__icon {
display: none;

@include media-query($widescreen) {
display: block;
}
}
}

.site-header__search-toggle {
display: block;
}

.site-header__account,
.site-header__search,
.site-header__cart {
@include media-query($medium-up) {
padding: 10px 11px;
}
}

.site-header__cart-title,
.site-header__search-title {
@include visually-hidden();
display: block;
vertical-align: middle;
}

.site-header__cart-title {
margin-right: 3px;
}

.site-header__cart-count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0.4rem;
top: 0.2rem;
font-weight: bold;
background-color: turquoise;
color: black;
border-radius: 50%;
min-width: 1em;
height: 1em;

span {
font-family: $font-stack-cart-notification;
font-size: calc(11em / 16);
line-height: 1;
}
}

.site-header__cart-count {
@include media-query($small) {
top: calc(7em / 16);
right: 0;
border-radius: 50%;
min-width: calc(19em / 16);
height: calc(19em / 16);
}

span {
@include media-query($small) {
padding: 0.25em calc(6em / 16);
font-size: 12px;
}
}
}

.site-header__menu {
display: none;
}

.site-header__icon {
@include media-query($small) {
display: inline-block;
vertical-align: middle;
padding: 10px 5px;
margin: 0;
padding-left: 22px;
}

.icon-search {

@include media-query($medium-up) {
margin-right: 3px;
}
}
}

JasmeetVT14313
Shopify Partner
292 63 77

Hi @ForTheArtists 
Can you please share theme preview URL on which you have implemented the code. As well as screenshot how do you want to have it so that I can guide you better.

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com