How can I make the header transparent in Debut theme?

Solved
KetanKumar
Shopify Partner
17070 1851 6393

@nicoleram 

thanks for details 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.template-index #shopify-section-header {
    position: absolute;
    width: 100%;
}
.template-index #shopify-section-header .site-header {
    background: transparent;
}
.template-index #shopify-section-header .site-header .site-header__mobile-nav {
    background: transparent;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
greendesignza
New Member
1 0 1

Hi there Ketan

Thank you for your solution on making the header transparent. It works so well.

Unfortunately, when I click on the hamburger menu in mobile,

the menu hides behind everything and disappears

site link is https://greendesignsa.myshopify.com/ and password is troyur

your help would really be appreciated

thank you in advance!

dumb1234
New Member
2 0 2

Hello

It only makes homepage header transparent not other pages header transparent

KetanKumar
Shopify Partner
17070 1851 6393

@greendesignza 

sorry for the late reply I have check its working fine now

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
KetanKumar
Shopify Partner
17070 1851 6393

@dumb1234 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
dumb1234
New Member
2 0 2
KetanKumar
Shopify Partner
17070 1851 6393

@dumb1234 

thanks for the details, yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.template-index .site-header {
    position: absolute;
    width: 100%;
    top: 0;
    background: transparent;
}
.template-index .site-header .site-header__mobile-nav {
    background: transparent;
}
.template-index .site-header .site-header__mobile-nav .site-nav a {
color: #fff;
}
.template-index .site-header .site-header__mobile-nav .site-nav__link--active .site-nav__label {
    border-bottom-color: #fff;
}
.template-index .site-header .site-header__mobile-nav .icon {
color: #fff;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing