How can I center a search bar above my menu?

EvaMtz
Tourist
5 0 1

Hello! Im trying to put a search bar or the icon that the template "sense" has but on the top of my menu in the center of the header, how can I do that??

 

Thanks!!

Replies 7 (7)
EvaMtz
Tourist
5 0 1

suyash1
Shopify Partner
9995 1241 1579

@EvaMtz - this will need some code editing, but it can be done

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

infoatcodelab7
Shopify Partner
593 141 154

@EvaMtz 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.header.header--top-center.header--mobile-center.page-width.header--has-menu {
  position: relative;
}
.header__search {
  position: absolute;
  right: -100%;
  top: 70%;
}
Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com
EvaMtz
Tourist
5 0 1

Doesn't work 😞

Litos
Globetrotter
688 169 149

Hi @EvaMtz,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
.header--top-center {
    grid-template-areas:
        'heading left-icon icons'
        'navigation navigation navigation' !important;
}
.header--top-center > .header__search {
        justify-self: center !important;
}
}

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
EvaMtz
Tourist
5 0 1

Thanks but still not working 😕

Litos
Globetrotter
688 169 149

Hi @EvaMtz,

Please send me the preview link, I will check it for you

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.