Overlay banner on header menu - Dawn theme

Overlay banner on header menu - Dawn theme

TiendasMD
Tourist
11 0 2

Hello,

I would like the banner image to overlay with the header menu, ideally only on desktop, on my website. I am using the latest version of Dawn and would like to have something like this. I've tried other codes suggested in the forum but have not made it to work yet. Would you please help me out?

 

TiendasMD_0-1728595875403.png

 

 

My store url is tiendamd.com and the password is nZFCxqqW

Thanks very much and best regards,

 
Replies 3 (3)

comercioservice
Shopify Partner
264 37 30

@TiendasMD  

 
hi Hope you are well,
I’ve taken a look at what you need—just a little CSS magic, and everything will be fixed! Follow my steps, and you'll have it sorted in no time!

1, from admin, go to Online Store > Themes.
2, Actions > Edit code for your active theme.
3, Find and open the theme.liquid file, maybe in the Layout folder.
4, Look for the </head> tag and paste the code in the end

 

<style>
@media only screen and (min-width: 749px){
sticky-header.header-wrapper.color-scheme-1.gradient {
    background: transparent;
}
sticky-header.header-wrapper.color-scheme-1.gradient header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    background: transparent;
}
section#shopify-section-template--17417908945078__image_banner {
    margin-top: -115px;
}
}
</style>​

 

result:

gutenplayer_0-1728596127016.png

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM
Thank you
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
Need store customizations, bug fixing or development ? Contact with us -- Support form for quick quote!
BFCM Big Deals: Big savings 25% off -on our Shopify FAQs apps!
TiendasMD
Tourist
11 0 2

Thanks very much Gutenplayer! It is working perfectly! I just have another issue: is it possible to make the color of the header menu (not any of the submenus) white? Additionally, is there a way to have icons instead of text in the header for mobile only? Thank you very much!

 

TiendasMD_0-1728596748732.png

 

Best regards

Dan-From-Ryviu
Shopify Partner
10147 2015 2076

Hi @TiendasMD 

Please add this code to theme.liquid file

{% if template == 'index' %}
<style>
@media (min-width: 750px) {
body .header-wrapper { background: transparent; }
body .header-wrapper .header__icon .icon,
body .header-wrapper .list-menu__item {
color: #fff;
}
}
</style>
{% endif %}

Screenshot 2024-10-11 at 10.29.38.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.