Transparent header menu over image banner

Technical Q&A
1

hi

i m using dawn theme and i would like to have:

1/ header transparent with image banner as background

2/this image banner size would adapt to any size screen you open the website with

3/when i scroll down, header becomes white background again

similare to this website: https://anauparis.com/

can anyone help me please? :slightly_smiling_face:

2

@mathieulenoir Yes, it is possible but here I can’t explain you because it is a practical task. Please share your site url.

3

thanks Sandeep

here comes my site: https://labalisienne.com/

PW: #BEBEdragon23

thanks for helping out!

4

Thanks @mathieulenoir You can do this by going to your Online Store > Live Theme > Customization > Header setting and check for background-color and all you will get the pre-define settings in dawn theme. Please let me know if you need any help!

5

oh yes i need help! :slightly_smiling_face:

is there any code to modify/add to do all this:

1/ header transparent with image banner as background

2/this image banner size would adapt to any size screen you open the website with

3/when i scroll down, header becomes white background again

6

@mathieulenoir If we write the code for the header, you have to upload white logo of the store and change the navigation menu color after this it will look like this-

sandyparihar07_0-1703833982552.png
sandyparihar07_0-1703833982552.png1577×752 182 KB

7

looks good, i can do that

but will you share the code?

8

@mathieulenoir Please use below code in your css file-

.header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: transparent;
}

header-menu span {
    color: #fff;
}

details-modal span svg {
    color: #fff;
}

.header__icons a {
    color: #fff;
}
9

thanks that works

but how to make the header with white background again when i scroll down?

and will that image be autosized depending on which screen i open the website from?