Header Padding and Alignment

[Angie_Freese]

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. 

 

Thanks

[CodingFifty]

Hi @Angie_Freese,

Please share the url.

[Angie_Freese]

Hi it's www.oflifeandlemons.co.uk

[Made4uo-Ribe]

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:
• 

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

[DaisyVo]

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: 

I hope this helps

Best,

Daisy

[Angie_Freese]

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]

Hi @Angie_Freese 

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

Best,

Daisy

[Angie_Freese]

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? 



Thanks

Angie

 

[DaisyVo]

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