Solved

How can I make the header transparent in Debut theme?

LuxeDerma
Tourist
5 0 3

Hi there,

We're working on updating our store to a new theme and have selected the Debut template to work from. Currently we use Brooklyn for our live site and if the top section of the homepage is a slideshow we're able to make the header transparent so that our logo and nav. menu are overlaid on the slideshow, however I can't seem to figure out how to do it in the Debut theme. Is this possible? Is it something I can do in the online editor or would it require special code?

Thank you!

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@LuxeDerma 

Thanks for update

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-index .site-header {background-color: transparent; position: absolute;}
.template-index .site-header__mobile-nav {background-color: 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 44 (44)

Hardik29418
Shopify Partner
2858 407 1073


Please provide website url and if your store is password protected then also provide password

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

KetanKumar
Shopify Partner
36839 3635 11972

@LuxeDerma 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LuxeDerma
Tourist
5 0 3

The url is www.luxederma.ca.

Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@LuxeDerma 

Thanks for url but i need debut theme your store url

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LuxeDerma
Tourist
5 0 3

Sorry about that, I forgot it's still in editing mode. Here's the template preview url: https://luxe-derma-partners.myshopify.com/?fts=0&preview_theme_id=81029038124

Thanks!

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@LuxeDerma 

Thanks for update

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-index .site-header {background-color: transparent; position: absolute;}
.template-index .site-header__mobile-nav {background-color: 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nicoleram
Visitor
2 0 2

How can I make it so that when I scroll down it stays at the top and it has a white background?

 

Like in this website:

https://fubu.com/

 

KetanKumar
Shopify Partner
36839 3635 11972

@nicoleram 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nicoleram
Visitor
2 0 2

@KetanKumar 

https://persempreactive.com/ password leovaw

 

Thanks!!

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
greendesignza
Visitor
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!

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Miopatron
Excursionist
10 0 4

it doens't work the other pages are now hiding under the transparent header!!!

Miopatron
Excursionist
10 0 4

i think you let us make faults so we will ask your help. Not good

KetanKumar
Shopify Partner
36839 3635 11972

@Miopatron 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Miopatron
Excursionist
10 0 4
www.miomilly.com password araiga
Miopatron
Excursionist
10 0 4

www.miomilly.com password araiga

KetanKumar
Shopify Partner
36839 3635 11972

@Miopatron 

thanks for url

try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.site-header, .site-header__mobile-nav {
background-color: transparent;
    border: none;
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Miopatron
Excursionist
10 0 4
I need also the text go white when its transparent and it must turn to
normal when you scroll down
KetanKumar
Shopify Partner
36839 3635 11972

@Miopatron 

https://codepen.io/JGallardo/pen/lJoyk

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Miopatron
Excursionist
10 0 4

please look what it did  to my website, are you even serious bro

Miopatron
Excursionist
10 0 4

i need it like rolex.com

not like this

Miopatron
Excursionist
10 0 4

do you want to help me or not

KetanKumar
Shopify Partner
36839 3635 11972

@Miopatron 

yes, as per your exampee link

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Miopatron
Excursionist
10 0 4
How
RSS
Explorer
55 0 23

Hi Ketan, I have used your code you provided here and it has worked nicely. The only thing is it has left a white line under the header. Can you help please?

KetanKumar
Shopify Partner
36839 3635 11972

@RSS 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RSS
Explorer
55 0 23

@KetanKumar 

Here it is Ketan

https://rachel-simone-studios.myshopify.com/

Access:yaewhi

Thank you.

KetanKumar
Shopify Partner
36839 3635 11972

@RSS 

great thanks for detail please add this code

#shopify-section-header {width: 100%;}
.site-header {border: none !important;}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RSS
Explorer
55 0 23

Thank you for the Ketan, It didn't work unfortunately 😞

It made no changes on desktop, It made some changes on mobile only but there was still a white background behind the header with a line underneath.

KetanKumar
Shopify Partner
36839 3635 11972

@RSS 

do you have like this?

KetanKumar_0-1624540525347.png

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RSS
Explorer
55 0 23

Hi Ketan, It doesn't look like that here on my end. Just to confirm are these the code I use.


I am pasting it in Asset->/theme.css because I don't have theme.scss.liquid.

This is the code I am using.

.template-index .site-header {background-color: transparent; position: absolute;}
.template-index .site-header__mobile-nav {background-color: transparent;}

#shopify-section-header {width: 100%;}
.site-header {border: none !important;}

 

KetanKumar
Shopify Partner
36839 3635 11972

@RSS 

can you please add this script 

https://codepen.io/codeandfly/pen/xbQVOR

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RSS
Explorer
55 0 23

Hey, Thanks for that. Quite unsure where they are going, can you give me directions where exactly I'm adding the script, please.

KetanKumar
Shopify Partner
36839 3635 11972

@RSS 

yes i have sent message please check

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sammy90
Visitor
2 0 1

Hi there. I'm wondering if you can help with my problem too?

I can't seem to make my logo appear transparent in the header in Debut theme...

I followed suggestions offered in other questions but it hasn't helped. I don't have theme.scss.liquid so I was pasting code into theme.css. That didn't work so I created theme.scss.liquid. That also didn't work.

Any suggestions would be helpful!

https://sonosnaps.myshopify.com/

Pass: crewdo 

KetanKumar
Shopify Partner
36839 3635 11972

@sammy90 

do you mean like this?

KetanKumar_0-1626497421677.png

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dianadari
Tourist
21 0 1

Hi 

I would like to make the header a little bit more transparent when I scroll down... it still should be white but transparency should be like 50%. Could someone help me?

HenryJames
Visitor
1 0 0

Hello. I made the header transparent with that code and also made it sticky with these steps but the logo, shopping cart icon, and search icon have disappeared in desktop view. On mobile, it isn't working at all. It doesn't show any content in the header on mobile.

Thanks please flow this step

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.js.liquid->paste below code at the bottom of the file.

$(window).scroll(function() {
if ($(this).scrollTop() > 35){  
    $('.site-header').addClass("sticky");
  }
  else{
    $('.site-header').removeClass("sticky");
  }
});
 

Step = 2

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-header.sticky {
   position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
}
MagicCandles
New Member
9 0 0

Hi, thanks for the help, the code worked in the sense that it made the header transparent, however I have my logo centered and it has pushed it underneath the menu. Is there a simple way to change it back?

Thanks in advance

dumb1234
Visitor
2 0 2

Hello

It only makes homepage header transparent not other pages header transparent

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dumb1234
Visitor
2 0 2
KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing