Can you help me move the search bar to the middle or stretch it from logo to cart button?

Store Design
1

jex7jm-19.myshopify.com

image
image1920×962 92.9 KB

3

Hi @vincentthegoat

Are you comfortable editing some code? First, find this line in theme.css


    .header__top--logo-left {
        --header-grid-template: "logo search icons" / auto auto 1fr;
    }

and change it to


    .header__top--logo-left {
        --header-grid-template: "logo search icons" / auto auto auto;
    }

With only this, you will make the search bar centered. For size find:

@media (min-width: 1024px) {
    .header__search .search__form {
        min-width: var(--search-form-width, 60rem);
        max-width: var(--search-form-width, 60rem);
    }
}

You can adjust that 60rem but I would add also after that

@media (min-width: 1500px) {
    .header__search .search__form {
        min-width: var(--search-form-width, 90rem);
        max-width: var(--search-form-width, 90rem);
    }
}

Adjust also and test on different browser widths.

1 Like
4

Hi @vincentthegoat,

Please go to Customize > Theme settings > Custom CSS and add code:

  • For center:
@media (min-width: 1024px) {
    .header__top--logo-left {
        grid-template-columns: 1fr 2fr 1fr;
    }
}
  • For left:
@media (min-width: 1024px) {
    .header__top--logo-left {
        grid-template-columns: auto 1fr auto;
    }
    .header__top--logo-left .header__search {
        justify-content: flex-end;
    }
}
5

Hi @vincentthegoat

  1. Go to Your Shopify Theme
  • From your Shopify admin:
    • Go to Online Store > Themes > Edit code
  1. Open theme.css or base.css File
  • In the left sidebar, go to:
    • Assets > theme.css(or base.css, depending on your theme version).
  1. Add the CSS Code
    Search (.header__top–logo-left) in ‘theme.css’ or ‘base.css’ file
@media (min-width: 1024px) {
  .header__top--logo-left {
    --header-grid-template: "logo search icons" / 1fr 1fr 1fr;
  }
}

This CSS tells the header to use three equal columns: Logo, Search, and Icons and forces the search bar to display fully on desktop

6

Hey @vincentthegoat,
Thanks for bringing your Query to Shopify community.
In order to make the search bar in center you need to follow these steps.
Go to Shopify Admin >> online Store >> Themes >> Edit Code >> theme.css.
In the end of theme.css file paste the following code.

@media (min-width: 1024px) {
    .header__top--logo-left {
        --header-grid-template: "logo search icons" / auto auto auto !important;
    }
}

image
image1906×391 68.7 KB

If this was helpful don’t forget to like it.
Thanks

7

Hello @vincentthegoat ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media (min-width: 1024px) {
    .header__top--logo-left {
        --header-grid-template: "logo search icons" / 1fr 2fr 1fr !important;
    }
}

image
image1898×823 61.5 KB

Let me know if you need further assistance!