Transparent Header

[middlebeats]

How can I make a Transparent Header that remains Transparent while scrolling in the Monaco Theme?

[Moeed]

Hey @middlebeats 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[middlebeats]

Hey @Moeed,

Store URL: fatat-jewellery.myshopify.com

Password: fatat

[Moeed]

Hey @middlebeats 

Your website already has a transparent header and is transparent on scroll too.

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

Best Regards,
Moeed

[middlebeats]

Thank you, but no it's not transparent when you scroll

[Moeed · Accepted solution]

Hey @middlebeats 

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 {
    background: transparent !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[dws_pvt_ltd]

Hello @middlebeats, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

[data-scheme=light] .header:hover, [data-scheme=light] .header_overlay-scroll,
[data-scheme=dark] .header_overlay-scroll {
    background-color: transparent !important;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[Rahul_dhiman]

Hi @middlebeats 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css ----> line number 723
search this code

@media (prefers-color-scheme: light) {
:root [data-scheme=auto] .header_overlay-scroll {
--color-foreground: var(--color-base-text);
--color-link: var(--color-base-text);
--color-foreground-title: var(--color-title-text);
--color-button: var(--color-base-button-background);
--color-button-text: var(--color-base-solid-button-labels);
--color-button-secondary: var(--color-base-outline-button-labels);
--color-social: 0, 0, 0;
background-color: rgba(var(--color-background));
}
}

and replace with this code.

@media (prefers-color-scheme: light) {
:root [data-scheme=auto] .header_overlay-scroll {
--color-foreground: var(--color-base-text);
--color-link: var(--color-base-text);
--color-foreground-title: var(--color-title-text);
--color-button: var(--color-base-button-background);
--color-button-text: var(--color-base-solid-button-labels);
--color-button-secondary: var(--color-base-outline-button-labels);
--color-social: 0, 0, 0;
}
}

result

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Small_Task_Help]

Hi,

Add Custom CSS

CSS code example

/* Make header transparent */
.site-header {
    background-color: transparent;
    position: fixed; /* Ensure the header stays fixed at the top */
    width: 100%;
    z-index: 1000; /* Ensure the header is above other elements */
    transition: background-color 0.3s ease; /* Smooth transition effect */
}

/* Optional: Adjust header elements color for better visibility on transparent background */
.site-header a,
.site-header .menu,
.site-header .logo {
    color: white; /* Adjust to your preference */
}

/* Ensure there is no background when scrolling */
body {
    margin-top: 0; /* Prevent any top margin that might be added */
}

Ensure no JavaScript interference