Header Padding and Alignment

Header Padding and Alignment

Angie_Freese
Excursionist
24 0 3

Hi 

I asked this earlier and thought I had an answer but the code I was given for this disabled the account and cart buttons in the header meaning people can't checkout if they add to cart.

Can anyone help me add some padding above the logo and underneath the announcement bar for the desktop only - It's fine on mobile. 

Plus I'd also like to move the logos and symbols in from each end of the header so they align with the images and the rest of the home page. 

 

Screenshot 2025-01-15 at 13.08.45.png



Thanks

Replies 8 (8)

CodingFifty
Shopify Partner
613 97 116

Hi @Angie_Freese,

Please share the url.

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Angie_Freese
Excursionist
24 0 3

Made4uo-Ribe
Shopify Partner
9875 2353 2950

Hi @Angie_Freese 

Try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (min-width: 740px){
header.theme-header {
    padding-top: 30px;
}

header.theme-header div#identity {
    padding: 0 1.04166667%;
}
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1736980725621.png

     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

DaisyVo
Shopify Partner
3782 406 498

Hi @Angie_Freese 

 

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 (min-width: 500px) {
    .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 480px;
    }
}
@media screen and (min-width: 740px) {
    .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 720px;
    }
}
@media screen and (min-width: 980px) {
    .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 960px;
    }
}
@media screen and (min-width: 1220px) {
    .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 1200px;
    }
}
.announcement__bar-section div#top-bar .row.top-bar-grid {
    margin-inline: auto;
}
.header-section.js-header-section > header.theme-header {
    padding-top: 20px !important;
}

 

Here is the result: image_720.png

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Angie_Freese
Excursionist
24 0 3

Hi Daisy

Thanks so much - that's sorted out moving the header down without harming the cart button. It's also moved the icons in the announcement bar but too far now and it's made no difference to the logo and menu. Is it possible to have everything aligned with the images and rest of the home page?

Thanks for your help

Angie

DaisyVo
Shopify Partner
3782 406 498

Hi @Angie_Freese 

 

I don't get your idea, please share the screenshot so I can understand better

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Angie_Freese
Excursionist
24 0 3

Thanks for getting back to me. I've attached a photo of how it looks. The padding is sorted but still not the positioning of the menu/logo/announcement logos. The red line is what I'd like everything to be in line with and the arrows show what needs moving - does that make sense? 

Screenshot 2025-01-16 at 23.27.12.png

Thanks

Angie

DaisyVo
Shopify Partner
3782 406 498

Hi @Angie_Freese 

 

Please change the old code with this code

 

 .announcement__bar-section div#top-bar .row.top-bar-grid {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (min-width: 500px) {
     .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 480px;
    }
}
@media screen and (min-width: 740px) {
     .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 720px;
    }
}
@media screen and (min-width: 980px) {
     .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 960px;
    }
}
@media screen and (min-width: 1220px) {
     .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 1200px;
    }
}
@media screen and (max-width: 1679px) {
     .announcement__bar-section div#top-bar .row.top-bar-grid {
        width: 94%;
    }
}

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution