Shopify themes, liquid, logos, and UX
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
Hi @Angie_Freese,
Please share the url.
Try this one.
@media only screen and (min-width: 740px){
header.theme-header {
padding-top: 30px;
}
header.theme-header div#identity {
padding: 0 1.04166667%;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
@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;
}
I hope this helps
Best,
Daisy
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
I don't get your idea, please share the screenshot so I can understand better
Best,
Daisy
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
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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025