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

Hey @middlebeats Follow these Steps: Go to Online Store Edit Code Find theme.liquid file Add the following code in the bottom of the file above tag RESULT: [Moeed_0-1722427257553.png] If I managed to help you then, don’t forget to Like it and Mark it as Solution! Best Regards, …

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

Hey @Moeed , Store URL: fatat-jewellery.myshopify.com Password: fatat

Hey @middlebeats Your website already has a transparent header and is transparent on scroll too. [Moeed_0-1722426949640.png] If I managed to help you then, don’t forget to Like it and Mark it as Solution! Best Regards, Moeed

Thank you, but no it’s not transparent when you scroll [Screenshot 2024-07-31 at 2.57.42 PM.png]

Hello @middlebeats , Please follow these steps to add this CSS code: Go to your Online Store Click on “Themes” Select “Edit code” Open your CSS file. If you have a custom CSS file, open that instead. If you can’t find your custom CSS file, open “base.css” Add the following code at the end of the f…

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: …

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-co…

Transparent Header

Shopify Discussion

Moeed July 31, 2024, 11:55am 4

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

Topic		Replies	Views
Have header be transparent before scrolling Store Design header , customizations , css	4	148	March 11, 2025
Sense theme header transparent Technical Q&A design , css , shopify-themes , troubleshooting	6	68	February 3, 2026
How to create transparent header Store Design header	8	88	September 11, 2024
Atelier Theme Transparent Header Store Design header	12	195	August 19, 2025
How to change the transparent header to white background/black logo and menu text when scrolling? Store Design design , header , customizations	3	55	April 5, 2025

Transparent Header

Related topics