A user seeks to customize their Shopify Dawn theme header by moving the logo and menu further down into the image banner, replicating a style where the logo sits on the left and menu items on the right, both prominently displayed over the banner image.
Key Customization Steps:
base.css modificationsResolution:
The discussion concludes successfully with the user confirming the desired layout was achieved. The helper provided multiple iterations of CSS code snippets to progressively refine the positioning until matching the reference design. All code modifications were added cumulatively to the base.css file in the theme assets.
Hi, I would like to move the logo and the menu further down into the image banner as per the example shown from screenshot of Oslo Coffee.
I’m looking at basically replicating that same style with logo on one side and menu on the other, both larger and more pronounced.
Thanks!!
(How I want it to look)
(How mine currently looks)
@dekiv Can you share your store url ?
https://kuhl-cher-coffee.myshopify.com/admin/themes/141109985592/editor?section=header
Store is password protected: stewsa
@dekiv Put below css into base.css file (Online store->themes->assets->base.css)
span.h2 {
color: white !important;
font-size: 30px !important;
}
a.header__heading-link.link.link--text.focus-inset {
margin-top: 28px !important;
}
span.header__active-menu-item {
color: white !important;
}
span.header__active-menu-item {
margin-left: 496px;
}
svg.modal__toggle-open.icon.icon-search {
color: white !important;
}
svg.icon.icon-cart-empty {
color: white !important;
}
@Ujjaval Thanks! And if I wanted to move both the logo and menu items further down the banner I would just need to change this one?
a.header__heading-link.link.link–text.focus-inset {
margin-top: 28px !important;
@Ujjaval Also - Looking for logo and the other heading pages to be closer to the left hand side margin, rather than more in the middle like the css code you provided has done. How do I move the logo and headings closer to left margin whilst keeping the menu on the far right?
@dekiv Yes !
@Ujjaval Thank you. Would that apply to my second question above as well?
@dekiv which one ? can you repeat again?
@Ujjaval it is this question
@Ujjaval Also - Looking for logo and the other heading pages to be closer to the left hand side margin, rather than more in the middle like the css code you provided has done. How do I move the logo and headings closer to left margin whilst keeping the menu on the far right?
@dekiv add below css into base.css file
@media screen and (min-width: 1024px) {
.page-width {
padding: 0px !important;
}
a.header__menu-item.list-menu__item.link.link--text.focus-inset {
color: white;
}
span.h2 {
margin-left: -142px !important;
}
.header--middle-left .header__inline-menu {
margin-left: -166px !important;
margin-top: 25px !important;
}
.header__icons {
margin-right: -76px !important;
margin-top: 27px !important;
}
}
@Ujjaval Sorry I meant the “image banner” section and the subtitle underneath to be inline with the “Kuhl-Cher Coffee” logo section, so moved to the far left whilst keeping the menu items to the far right. Basically what these guys did with theirs:
@dekiv
Put below one css into your css file
@media screen and (min-width: 1024px) {
.page-width {
padding: 0px !important;
}
span.h2 {
margin-left: -142px !important;
}
.header {
display: block !important;
}
.list-menu--inline {
margin-left: 37% !important;
}
a.header__menu-item.list-menu__item.link.link--text.focus-inset {
color: white;
}
.header__icons {
margin-left: 92% !important;
margin-top: -86px !important;
}
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
margin-left: -188px !important;
}
}
@Ujjaval replace that code with the one you supplied above originally or add to it?
@dekiv Add to it. Moderator Edit
@Ujjaval Thank you so much for all your help!
