How to make header transparent (Dawn Theme)?

Store Design
, , , ,

Topic summary

A user seeks to make their header transparent and overlay it on a video in the Dawn theme. Multiple solutions have been proposed involving custom CSS code:

Suggested approaches:

  • Add CSS to base.css or theme.liquid file to set header background to transparent or semi-transparent using rgba() values
  • Use absolute positioning to place header over content
  • Apply media queries for responsive behavior (min-width: 990px)

Current status:

  • Initial solution caused layout issues (screenshot provided showing broken layout)
  • Alternative code snippets offered with different transparency levels and positioning properties
  • Solutions target .header class with properties like position: absolute, background: rgba(), and flexbox/grid display settings

Note: The conversation text appears corrupted or reversed in places, making some code snippets difficult to read accurately. The discussion remains open with multiple community members providing CSS customization options.

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

Hello,

I am trying to have my header be transparent and placed on the video.

Can somebody provide me with corresponding code ?

this is my store url: https://justincase-de.com/?_ab=0&_fd=0&_sc=1

Kind regards.

2

Hi @JustInCase-de

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.header{
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
display: flex;
withd: 100%;
justify-content: space-between;
}

You can change the rgb code for the color you want and the transparency in rgba()

Hop my answer will help you

3

Unfortunately that didn’t work, instead this happened:

Bildschirmfoto 2023-02-01 um 19.47.30.png
Bildschirmfoto 2023-02-01 um 19.47.30.png2544×1046 383 KB

4

Hi @JustInCase-de

Sorry about my answer. You can remove the above code and try adding it again with transparent color:

@media screen and (min-width: 990px){
.header {
    background: rgba(255, 255, 255, 0.5);
    padding-top: 8px;
    padding-bottom: 8px;
    display: grid;
    justify-content: space-between;
    width: -webkit-fill-available;
    align-items: center;
}
}

And result like this:

PageFlyKate_0-1675279051911.png
PageFlyKate_0-1675279051911.png1855×631 110 KB

5

Hello @JustInCase-de

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1675309913133.png
GemPages_0-1675309913133.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1675309940377.png
GemPages_1-1675309940377.png1391×839 68 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

@JustInCase-de

step 01:

  1. Go to your Store > Theme > click to edit code.
  2. find this file "theme.liquid " and open.

step 02:

  1. Paste the code at the of the file.
.header--middle-left.header--mobile-center.page-width.header--has-menu {
    position: absolute;
    width: 100%;
    background-color: #01000152;
}

hope this idea helps you