Dawn theme transparent header

technase · ‎10-15-2024

Hi,

I'm looking for help making the header transparent so it overlays on the banner. I'd like it to be 80% transparent/ semi transparent.
Any assistance would be greatly appreciated!

Link: https://testingstoresandthemes.myshopify.com/
storefront password: lock

technase

Moeed · ‎10-15-2024

Hey @technase

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
header {
    position: absolute;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff4f !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

View solution in original post

Moeed · ‎10-15-2024

Hey @technase

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
header {
    position: absolute;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff4f !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

PaulNewton · ‎10-15-2024

@technase try to correct your post to avoid label spam, it doesn't help and makes it harder for everyone to find relavant info.

And if you keep doing it when you have a deeper issue that really matters you'll just get ignored.

transparent headers is a common topic found in search https://community.shopify.com/c/forums/searchpage/tab/message?advanced=false&allow_punctuation=false...

Contact paull.newton+shopifyforum@gmail.com for the solutions you need

Save time & money ,Ask Questions The Smart Way

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org

Dan-From-Ryviu · ‎10-15-2024

Hi @technase

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

{% if template == 'index' %}
<style>
.shopify-section-header-sticky .header-wrapper { background: #ffffffcc; }
#MainContent { margin-top: -146px }
@media (max-width: 749px) {
body #MainContent { margin-top: -125px }
}
</style>
{% endif %}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Dawn theme transparent header