Center Align Predictive Search under custom search bar?

[Brian-A]

Center Align Predictive Search under custom search bar?

Isolated the code but when adding it to Base.css not taking effect, not sure if I’m using right min/max.

Also having trouble setting the code for desktop then mobile is changing differently.

www.extremekool.com

Password01

IMAGE1: Desktop view - Search is off a bit, I used left 50 but not sure if I can use align center?


Image2: Mobile - off by a bit


[Dan-From-Ryviu]

Hi @Brian-A

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

html predictive-search[open] .predictive-search, 
html predictive-search[loading] .predictive-search {
    margin-left: -50px;
}

[DaisyVo]

Hi @Brian-A ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (min-width: 1200px){
body predictive-search[open] .predictive-search {
    left: 0 !important;
    transform: unset !important;
    margin-left: 0 !important;
}
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[CoffeeAndCode]

Try this CSS in one of your style tags somewhere in your template:

div.predictive-search.predictive-search--header {
    margin-left: 0 !important;
}