How to make header transparent so banner bleeds into it

How to make header transparent so banner bleeds into it

lilyioti
Excursionist
19 0 4

How can I make my header transparent, and have my home page (only this page) banner bleed into the header. And how can I then have it so when scrolling down, the header becomes white and my logo inverts to black?

To clarify;

  1. When first landing on the home page:

    • The header is transparent (so the banner image blends into it).
    • The menu items and logo are white for visibility over the banner.
  2. When scrolling down:

    • The header changes to a solid white background.
    • The menu items and logo switch to black for contrast.

URL: chilledespresso.com

 

 

Replies 4 (4)

khushal8645
New Member
5 0 0

First remove gradient and color-schema from sticky-header then do this code

sticky-header {

background: transparent;
position: absolute;
width: 100%;
border: none;

}

.section-header.scrolled-past-header sticky-header {
background-color: white !important;

}

we cannot change the logo color becaue you have used image so but you can use other image and change the display none to block when it scroll just like background change.

lilyioti
Excursionist
19 0 4

What code would I put if I was to use a different logo colour after scrolling 

khushal8645
New Member
5 0 0

when you have to add a another image of logo so write this code
.section-header .second-logo { 

display: none;

}

 

.section-header.scrolled-past-header .second-logo {

display: inline-block;

}

 

.section-header.scrolled-past-header .header__heading-logo-wrapper {

display: none;

}

lilyioti
Excursionist
19 0 4

1. How to add second logo

2. Can I make all of this so it only works on my home page, &

3. How can I make the text white and have it go black on scroll ( like the original query  )