How to adjust my Shopify header layout: left-aligned logo, long search bar, smaller row spacing

Store Design
1

Hi,

I need help adjusting my desktop header layout. Here’s the current setup:

Current header structure:

  • Row 1: Logo in the center

  • Row 2 (below Row 1): Navigation / header titles

  • Right side (Row 1): Search bar, login, and cart

What I want to change:

  1. Move the logo to the left side of Row 1.

  2. Move the search bar to the left-middle of Row 1 and make it very long.

  3. Keep the login and cart on the right as they are.

  4. Keep the navigation / header titles below (Row 2).

  5. Reduce the vertical space between Row 1 and Row 2 so the header is more compact.

Goal:

  • Have a balanced and modern header layout like in the bottom screenshot of the picture below

I would appreciate any advice, CSS snippets, or Shopify theme settings to achieve this.

Thank you!

Shopify require help pls
Shopify require help pls1616×1197 226 KB

2

Store: sawez.be

Store pass: abc

3

Hi @sawez , try this Custom CSS snippet:

@media (min-width: 989px) {
  .header {
    display: flex;
    flex-wrap: wrap;
  }
  
  .header__search {
    display: none;
  }
  
  .header__heading {
    grid-area: unset;
    margin-right: auto;
  }
  
  .header__icons {
    flex: 1;
    width: 100%;
  }
  
  .desktop-search {
    flex: 1;
  }
  
  .header__inline-menu {
    order: 3;
    margin: auto;
  }
  
  .search-modal__form {
    max-width: unset;
    padding-inline: 30px
  }
}
4

I think I found a part of the solution for the logo: .header__heading-link {
margin-left: -134rem !important;
}

But the search icon remains overlapping the logo, and the search bar is still not in the middle left as I cant find the code for it.

Also while I was typing I just saw your comment @stackingcontext I tried your code but it gave me this:

Shopify req help header
Shopify req help header1562×246 36.4 KB

5

I managed to hide the search icon on the left by giving doing this: .icon.icon-search {

display: none;

}

The issue remains however by how it looks still unfortunately

6

@sawez , I made some adjustments to the code I shared above, try this version

@media (min-width: 989px) {
  .header {
    display: flex;
    flex-wrap: wrap;
  }

  .header__search {
    display: none !important;
  }
  
  .header__heading {
    grid-area: unset;
    margin-right: auto;
  }
  
  .header__icons {
    flex: 1;
    width: 100%;
  }
  
  .desktop-search {
    flex: 1;
  }
  
  .header__inline-menu {
    order: 3;
    margin: auto !important;
  }
  
  .search-modal__form {
    max-width: unset;
    padding-inline: 30px
  }

  predictive-search {
    display: flex;
  }
}

After applying it here it looks like this

image
image1304×711 148 KB

7

You are amazing. I have no words, thanks a lot for taking the time out of your day to help a fellow member out. Greatly appreciate it

8

Awesome, I’m glad it helped! If you need further help in the future, don’t hesitate to reach out.