How can I center a search bar above my menu?

[EvaMtz]

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!!

[EvaMtz]

https://pgrqsca8xh8helzm-71810613548.shopifypreview.com

psw: awobli

[suyash1]

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

[infoatcodelab7]

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

[EvaMtz]

Doesn't work 😞

[Litos]

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!

[EvaMtz]

Thanks but still not working 😕

[Litos]

Hi @EvaMtz,

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