How can I make my Ella theme header transparent?

Store Design
,

Topic summary

A user seeks help making the Ella theme header transparent. They found a previous forum post with similar solutions but none worked for them.

Attempted solutions that failed:

  1. Adding CSS code to the bottom of base.css file targeting sticky-header elements
  2. Adding CSS to base.css (located in online-store > themes > assets) to make wrapper-header-bottom transparent
  3. Pasting code in theme.liquid file before the closing body tag

The code snippets provided appear corrupted or improperly formatted (text appears reversed/garbled), which may explain why the solutions aren’t working. The user is looking for alternative methods or corrected code to achieve header transparency in their Ella theme.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

I want to make my header transparent

I came across one post at this forum from a guy asking the same thing as me. There was a bunch of solutions, but none of them worked for me. The solutions that ive tried and didnt work:

1 - Search file base.css.
Paste the below code at bottom of the file → Save

sticky-header,sticky-header* { background: transparent !important;}

2-

Add below css into base.css file (online store->themes->assets->base.css)

.wrapper-header-bottom {
    background-color: transparent !important;
}

3- Open your theme.liquid file, paste the below code before
style> .header.is-sticky { background: rgb(255 255 255 / 45%) !important; }