Atelier Theme Transparent Header

Store Design
1

Hi! I’m using the Atelier theme and I want the header to stay 100% transparent — no background on scroll or hover.

I added custom CSS in the of theme.liquid, but the header still turns white. What class or method should I override to stop this?

Thanks!

(I have tried everything and nothing works)

2

Hey @Sebotas

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

3

https://kmxnf2-vx.myshopify.com/

4

Hey! @Sebotas ,

Go to your Shopify Admin Panel.

Navigate to Online Store → Themes.

Click on Edit Code (not Customize).

Open the theme.liquid file (found inside the Layout folder).

Scroll down and paste the code just before the tag:
5

Hey @Sebotas

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 tag

RESULT:

Moeed_0-1750096298655.png
Moeed_0-1750096298655.png1898×914 142 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

Hi, experiencing the same issue but the box with your code is empty, could you share it again? Thanks!!

7

Hey @user709

Happy to help you out, feel free to share your store URL and password (if enabled)

Best,
Moeed

8

thanks! So the two issues with the header I’m experienceing are:

  • when hoovering over any of the links of the header, the header is no longer transparent but turns white
  • on my pages like ‘about’ or ‘learn’ the header is standard white - and would love to have the same transparent effect as on the homepage!

website:

Thanks!

9

Hey @user709

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[transparent] .header__row {
    background: transparent !important;
}
</style>
{% if template == 'index' %}
<style>
header-component#header-component {
    position: absolute !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-width: 100% !important;
}
</style>
{% endif %}

RESULT:

image
image1900×912 183 KB

image
image1898×909 144 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

10

Thank you!! It worked for the first issue with the hover, but I don’t see any changes on the other pages. Any ideas for those?

11

Share your collaborator request code in my private messages and I can take care of that for you!

Best,
Moeed

12

I ended up pasting this:

<style>
header-component#header-component {
    position: absolute !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-width: 100% !important;
}
</style>

in the hero.liquid (as the images are under hero) and it worked! Thanks for your help!

13

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.