Search Box

[travelergadgets]

I want header search box logo on center not search bar

[ZestardTech]

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;
}

[travelergadgets]

I don't want this bar only search icon

[AakashInfoTech]

Hope you are doing well?

Kindly, please give me your Shopify store URL.

Thank you

[travelergadgets]

https://www.travelnride.com/

[AakashInfoTech]

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

Am I right?

[travelergadgets]

I want like this.

Is Possible?

[ZestardTech]

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;
}

[travelergadgets]

[AakashInfoTech · 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);
}

[travelergadgets]

Thanks

[CamiC]

Hi, how can I do this on warehouse theme (only leave the search icon and centre the logo)? I copied this, but it didn´t work.

Thanks!