How can I make the header transparent in Debut theme?

Store Design
1

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!

2

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

3

@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.

4

The url is www.luxederma.ca.

Thank you!

5

@LuxeDerma

Thanks for url but i need debut theme your store url

6

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!

7

@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;}
8

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/

9

@nicoleram

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

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

Please share your site URL,
So I will check and provide a solution here.

10

@KetanKumar

https://persempreactive.com/ password leovaw

Thanks!!

11

@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;
}
12

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 :slightly_smiling_face:

thank you in advance!

13

Hello

It only makes homepage header transparent not other pages header transparent

14

@greendesignza

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

15

@dumb1234

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

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

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

16

https://dumb-online.myshopify.com/

Password weeffe

17

@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;
}
18

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?

19

@RSS

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

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

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

20

@KetanKumar

Here it is Ketan

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

Access:yaewhi

Thank you.