How do I make my header sub menu transparent? Paper theme

Store Design

Topic summary

A user seeks to make the dropdown submenu in Shopify’s Paper theme transparent so it doesn’t obscure background images.

Solution Provided:

  • Add custom CSS code to the theme.liquid file (above the </body> tag)
  • The code targets .site-nav__dropdown with background-color: #ffffff1a for transparency
  • An alternative hex code #ffffff45 was suggested for less transparency to improve text readability

Key Considerations:

  • Full transparency may make menu text difficult to read
  • Adjusting the hex code’s alpha value controls transparency levels

Current Status:

  • The user hasn’t purchased the Paper theme yet, so code editing isn’t possible
  • They plan to implement the solution after purchasing
  • The solution was confirmed as helpful and will be applied once the theme is acquired
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I’m using paper theme and I would like my sub menu dropdown to not cover my image behind. How do I make my header sub menu dropdown transparent? Thank you

1 Like
2

Hey @Wes-DragonLink

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

Hi Moeed,

Thank you for helping. Take a look. My Store · Customize Updated copy of Paper · Shopify

1 Like
4

That’s the URL of your admin dashboard, can you share the link of your frontend website?

Best Regards,

Moeed

5

Hi Moeed,

This might be an issue. Our front end website is a basic one right now from Shopify (dawn theme). www.dragonlinksourcing.com

We will be changing this over the the one I’m building in the admin section (paper theme).

1 Like
6

Can you share the preview URL of the draft theme? When you preview that theme, in the bottom you will see a button called “Share Preview” just send that link to me.

Best Regards,

Moeed

7

WesDragonLink_0-1738048958195.png
WesDragonLink_0-1738048958195.png2654×1568 529 KB

1 Like
8

https://r14ca5gy898y9jf6-59725742166.shopifypreview.com

:slightly_smiling_face:

1 Like
9

Hey @Wes-DragonLink

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-1738049579350.png
Moeed_0-1738049579350.png1900×909 367 KB

NOTE; Making it transparent will make your menu items barely readable.

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

Best Regards,
Moeed

1 Like
10

Thx Moeed. Is there a way to vary the level of transparency? Maybe a bit less transparent to make the text stand out a bit more?

1 Like
11

Hey @Wes-DragonLink

You can try this hex code instead #ffffff45. It is less transparent as compared to the other one share above.

Best Regards,

Moeed

1 Like
12

Thank you very much Moeed. I haven’t bought the theme yet so I can’t edit its code yet. Once we buy it I will make the change. :slightly_smiling_face:

1 Like
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.

1 Like