Header Spacing

Store Design

Topic summary

A Shopify store owner is attempting to customize their header layout but encountering alignment issues between desktop and mobile views. They want to:

Goals:

  • Reposition the logo further left
  • Adjust spacing between shopping bag and hamburger menu icons
  • Move both icons to the far right of the header
  • Fix hamburger menu positioning (appears left on desktop despite code changes)

Current Status:

  • Two community members provided CSS solutions targeting base.css and Custom CSS sections
  • One solution partially worked but created new issues: logo and hamburger menu are positioned too far left/right relative to desired margins, and desktop icon spacing is uneven
  • The user suspects previously added custom code in base.css and theme.liquid files may be causing the desktop/mobile misalignment
  • Screenshots were shared showing the current header appearance and code snippets

Resolution: Ongoing troubleshooting. The user is now attempting to fine-tune the positioning to align elements with page margins, but manual width adjustments aren’t taking effect as expected.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m new to Shopify and still finding my way around. I’ve been trying to tweak the layout of my store’s header but have found myself going down a bit of a code rabbit hole!

What I’m trying to do:

  • Move my logo slightly more to the left.
  • Adjust the spacing between the shopping bag and hamburger menu icons.
  • Move the shopping bag and hamburger menu to the very right-hand side of the header. (Also I moved the hamburger menu to the right of the logo but it is still on the left for desktop view)

If anyone could guide me on how to make these changes or point me in the right direction, I’d really appreciate it. I’m eager to learn but feel a bit stuck right now.

Thank you in advance for your help! :blush:

www.resonancemusiccollective.com

resonancemusic_2-1736053880616.png

PS - I think it is one of these pieces of code that I have inputted that is responsible for the misalignment between the desktop and mobile view

  1. base.css

resonancemusic_0-1736053753142.png
resonancemusic_0-1736053753142.png622×205 5.03 KB

  1. theme.liquid

resonancemusic_1-1736053845242.png
resonancemusic_1-1736053845242.png728×223 5.69 KB

1 Like
2

@resonancemusic please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (max-width: 989px) {
.header {padding: 8px 0 !important;}
}

suyash1_0-1736060600747.png
suyash1_0-1736060600747.png1366×768 245 KB

3

Hi @resonancemusic

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
header.header.header--middle-left.header--mobile-left {
    padding-inline: 0 !important;
}
}
@media screen and (min-width: 990px) {
    .header--top-left.drawer-menu, .header--middle-left.drawer-menu {
        grid-template-areas: 'heading icons navigation' !important;
    }
}

Here is the result:

image_360.png
image_360.png285×359 115 KB

image_720.png
image_720.png720×255 107 KB

I hope this helps

Best,

Daisy

4

No luck with this unfortunately

5

@resonancemusic I did not see the code added, can you please add my given code so I can check the issue?

6

This works! but the logo and hamburger menu are slightly too far left and right of the picture (treat the picture as the margin), I tried changing the width in the code but it doesn’t let me manually change it for some reason, also the icons aren’t evenly spaced on the desktop view for some reason.

7

I added the code but it didn’t work, I have readded it with the custom code from the other response, I am now trying to change the logo and hamburger menu to align with the picture