Search Box

Solved
travelergadgets
Excursionist
21 0 6

I want header search box logo on center not search bar

Capture.PNG

Accepted Solution (1)

Accepted Solutions
AakashInfoTech
Shopify Partner
72 10 24

This is an accepted solution.

Here is the custom code that you need to use in your theme.

.header-bar__module.header-bar__search {
    background-color: transparent;
}
.header-bar__search-input[type=search] {
    opacity: 0;
    visibility: hidden;
}
.header-bar__search-submit {
    left: 50%;
    transform: translate(-50%,0);
}


 

View solution in original post

Replies 11 (11)
Pallavi
Shopify Expert
2434 406 524

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

 

input.header-bar__search-input {
text-align: center!important;
}
.supports-fontface .header-bar__search-submit {
width: 70%!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
travelergadgets
Excursionist
21 0 6

Capture.PNG

I don't want this bar only search icon

AakashInfoTech
Shopify Partner
72 10 24

Hope you are doing well?

Kindly, please give me your Shopify store URL.

Thank you

travelergadgets
Excursionist
21 0 6
AakashInfoTech
Shopify Partner
72 10 24

Basically you need your search icon to the right side of your search box.

Am I right?

 

travelergadgets
Excursionist
21 0 6

Capture.PNG

I want like this.

Is Possible?

Pallavi
Shopify Expert
2434 406 524

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

.header-bar__search button, .header-bar__search form, .header-bar__search input {
    width: 90px;
}
input.header-bar__search-input {
    text-align: center!important;
}
.supports-fontface .header-bar__search-submit {
    width: 50%!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
travelergadgets
Excursionist
21 0 6

Capture.PNG

AakashInfoTech
Shopify Partner
72 10 24

This is an accepted solution.

Here is the custom code that you need to use in your theme.

.header-bar__module.header-bar__search {
    background-color: transparent;
}
.header-bar__search-input[type=search] {
    opacity: 0;
    visibility: hidden;
}
.header-bar__search-submit {
    left: 50%;
    transform: translate(-50%,0);
}


 

View solution in original post