How can I center a search bar above my menu?

Store Design
,
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!!

2

https://pgrqsca8xh8helzm-71810613548.shopifypreview.com

psw: awobli

3

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

4

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

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!

6

Doesn’t work :disappointed_face:

7

Thanks but still not working :confused:

8

Hi @EvaMtz ,

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