Search bar wrong placement - Minimal

Solved
VictorSaneFood
Tourist
7 0 2

Dear Shopify community

I tried playing around with moving the search bar down to the header menu. During my successful attempt, I've misplaced a search bar on the left side above the header. I would like it removed. I can't seem to find the right code...  

Link: https://sanefooddk.myshopify.com/
PW: wiakre

 

Bonus info: 

How am I able to center the search icon in the header menu? 

 

Thanks in advance!

/Victor

0 Likes
suyash1
Shopify Partner
2735 290 452

@VictorSaneFood - what you have done is you pulled search bar out of navigation, you can centralize it but it do not have separate class or id for its li tag

hence recommend to puy back it in navigation, or if you can add class / id to its li tag, it will be more helpful. If you want you can add me to staff or you can do it on your own.

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
dmwwebartisan
Shopify Partner
5837 1336 1713

This is an accepted solution.

@VictorSaneFood 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
.header-bar__search:first-of-type {display: none !important;}
.site-nav .header-bar__search {
    margin-left: 20px !important;
    display: block !important;
    margin-top: 5px !important;
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
VictorSaneFood
Tourist
7 0 2

Thanks dmwwebartisian! 

It did the trick. BUT the text are not centered in the navigation menu - got a quick fix? 

 

/Victor

dmwwebartisan
Shopify Partner
5837 1336 1713

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes