How to Remove Extra Empty Space in Header Menu?

Store Design
, , ,
1

Diliyaer_0-1740561380972.png
Diliyaer_0-1740561380972.png2878×1622 803 KB

this is the preview page: https://5ez5sc08a2r1kpr3-5646450757.shopifypreview.com
Hi, I need your help removing this empty space on the right. [Dawn theme] My end goal is to create a header menu that separates from the middle, meaning the menu list is left aligned and the icons list is right alined with the empty space in the middle. Hope I will get suggestions and insights from you guys.

2

Hey @Diliyaer ,

You can achieve this layout by modifying your .header CSS to use justify-content: space-between;, which will push the menu list to the left and the icons to the right, creating the empty space in the middle. Here’s the updated CSS:

.header {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header .header__menu {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.header .header__icons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

If you still see extra space on the right, check if any container has max-width or margin settings affecting the alignment. Let me know if you need further adjustments!

Result:

rajweb_0-1740564818591.png
rajweb_0-1740564818591.png1886×788 136 KB

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,
Rajat

3

@Diliyaer

Since you have base.css, follow these steps to add the code:

Follow these Steps:

  1. Online Store

  2. Themes

  3. Edit Code

  4. In the Assets folder, find and open base.css.

  5. Scroll to the bottom and paste the Code.

Let me know if it needs further tweaks!

4

Hi @Diliyaer

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: none;
}

a#cart-icon-bubble {
    display: none;
}

Result

LizHoang_0-1740564693509.png
LizHoang_0-1740564693509.png684×262 96.5 KB

Best,

Liz

5

Hello @rajweb , it worked somewhat, as you see, it separated the logo from the munu list but not (im assuming) not between the menu list and the icons list? Could you please have a look, thank you

Diliyaer_0-1740564856503.png
Diliyaer_0-1740564856503.png2878×1624 831 KB

6

Hi @Diliyaer

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

7

@Diliyaer ,

I see your screenshot! Based on the inspector, it looks like the .header structure may not be aligning properly. To fully separate the menu and icons with space in between, try this updated CSS:

Updated CSS for Better Alignment:

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.header__left {
    flex: 1;  /* Pushes menu to the left */
    display: flex;
    justify-content: flex-start;
}

.header__center {
    flex: 1;  /* Ensures space in the middle */
    display: flex;
    justify-content: center;
}

.header__right {
    flex: 1;  /* Pushes icons to the right */
    display: flex;
    justify-content: flex-end;
}

Let me know if this structure exists in your theme or if I need to adjust it further!

8

Hey @rajweb sorry but still the same result. I don’t know if it’s because the menu list and the header icons including the search bar are somehow “entangled” and causing the issue.

9

@Diliyaer ,

Hey! No worries, I see what you mean. It sounds like the menu list and icons (including the search bar) are inside the same container, which is preventing them from separating properly.

To fix this, we need to:

  • Check the HTML structure in header.liquid – Make sure the menu and icons are in separate

    containers.

  • Apply proper flexbox rules – Ensure each section aligns correctly.

Try This Updated CSS:

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.header__menu {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.header__icons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.header__search {
    margin-left: auto; /* Push search to the right */
}

Check Your header.liquid File

Make sure your menu and icons are inside separate

elements like this:

If the issue persists, please share your header structure, and I’ll take a closer look. Feel free to reach out anytime—happy to help! :blush: