Header Spacing

[resonancemusic]

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! 😊

www.resonancemusiccollective.com

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

2. theme.liquid

[suyash1]

@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;}
}

[resonancemusic]

No luck with this unfortunately

[suyash1]

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

[resonancemusic]

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 

[DaisyVo]

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: 

 

I hope this helps

Best,

Daisy

[resonancemusic · Accepted solution]

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.