Make header transparent in Prestige with hover

[M161]

Hi,

I would like to have the header transparent. I have tried everything, but it is not working.

Anyone who can help? Website is lash-ease.com

Thank you 

[Moeed]

Hey @M161 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header {
    position: absolute !important;
    background: transparent !important;
    width: 100% !important;
    box-shadow: unset !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[M161]

Thanks it works! 
In prestige you have the option to have a different logo for a transparante header. Is it possible to show that logo? Or change the logo only for the homepage? And I see the header is also transparent on the product page, but if possible I would only like the homepage. 

[CodingFifty]

Hi @M161,

Go to Shopify Admin → Online Store → Themes.

Click Edit Code.

Open the Layout folder and find theme.liquid.

Before the </head> tag, paste this code:

{% if template.name == 'index' %}
    <style>
        x-header.header {
            position: absolute !important;
            background: #0000002e !important;
            width: 100% !important;
            box-shadow: unset !important;
            color: white !important;
        }
    </style>
{% endif %}

[M161]

hey, can this shadow be removed?

[CodingFifty]

Remove this 

background: #0000002e !important;

Add this code below

background: transparent !important;

[M161]

Thanks!! is it possible to do a different logo only on the homepage? In prestige you have the option to have a different logo for a transparante header, but shows only on slideshow.

[CodingFifty]

{% if template.name == 'index' %}
    <style>
        x-header.header {
            position: absolute !important;
            background: #0000002e !important;
            width: 100% !important;
            box-shadow: unset !important;
            color: white !important;
        }

        img.header__logo-image {
    display: none !important;
}

.header__logo-image--transparent {
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
}
    </style>
{% endif %}

[M161]

the logo doesn't show now

[CodingFifty · Accepted solution]

Try this code.

{% if template.name == 'index' %}
    <style>
        x-header.header {
            position: absolute !important;
            background: #0000002e !important;
            width: 100% !important;
            box-shadow: unset !important;
            color: white !important;
        }

        img.header__logo-image {
    display: none;
}

.header__logo-image--transparent {
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
}
    </style>
{% endif %}

[M161]

Thanks a lot!

[DaisyVo]

Hi @M161 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

x-header.header *{
    color: white !important;
}
h1.header__logo a > img:nth-child(2) {
    display: none !important;
}
h1.header__logo a > img:nth-child(3) {
    display: block !important;
    opacity: 1 !important;
    position: relative !important
}

Here is the result: 

I hope this helps

Best,

Daisy