Transparent Header At All Times

Site URL: https://shopthebreak.com

Hello, 

I need help making my header fully transparent. I want the logo and navigation to be visible while the background is transparent. However, my homepage is a products page, and I can't figure out how to code the header as ALWAYS transparent. Right now its transparent for about a second before it take on the site's background color. 

Hi there,

I have used both of the code below to make my header transparent, but it's only working on the homepage. How can I make it so the header is transparent on all pages? Currently when I scroll on my inner pages, the block colour behind my logo and nav is still there. Image attached.

/* homepage header transparent */
.homepage header#header {
    background: transparent;
}

/* Home transparent */
body.homepage .header-announcement-bar-wrapper, body.homepage header#header {
    background: transparent !important;
}

On 3/2/2021 at 12:07 AM, GabbyE said:

Hi there,

I have used both of the code below to make my header transparent, but it's only working on the homepage. How can I make it so the header is transparent on all pages? Currently when I scroll on my inner pages, the block colour behind my logo and nav is still there. Image attached.

/* homepage header transparent */
.homepage header#header {
    background: transparent;
}

 

/* Home transparent */
body.homepage .header-announcement-bar-wrapper, body.homepage header#header {
    background: transparent !important;
}

 

Can you share link to your site?

Thank you so much! The first code was perfect because i only wanted it only my homepage (the main shopping page). It doesn't work on the product pages themselves, but personally I don't need it to! 

On 3/5/2021 at 3:29 AM, richtman said:

Thank you so much! The first code was perfect because i only wanted it only my homepage (the main shopping page). It doesn't work on the product pages themselves, but personally I don't need it to! 

 

To apply on product page, add this to Product Page Header

<style>
  .header-announcement-bar-wrapper, body.homepage header#header {
    background: transparent !important;
}
</style>

Hi @tuanphanSame question here!

How can I make the mobile header transparent? Right now its black.

Website: www.luciarodriguezc.com

pass: Lucia0987

Thanks!

14 hours ago, mvorozco16 said:

Hi @tuanphanSame question here!

How can I make the mobile header transparent? Right now its black.

Website: www.luciarodriguezc.com

pass: Lucia0987

Thanks!

Use this CSS

@media screen and (max-width:640px) {
body.homepage .Mobile-bar.Mobile-bar--top {
    background-color: transparent !important;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 9999;
}
body.homepage main.Index>section:first-child {
    padding-top: 50px;
}}