Dawn 9.0 - Gradient Header - White to Transparent

Store Design
,
1

Hi there,

I’m working on a Dawn theme based store, I had a solution for a fully transparent header previously but it didn’t work well with all backgrounds so I would like to implement a white header that fades to transparent as it reaches the bottom margin.

Any help would be greatly appreciated!

2

@LidDM221

Please give us the store URL then we will able to help.

3

@shreyhweb many thanks! the site in question is https://www.eskuta.com/

Currently the live theme is Dawn 2.3, so hopefully the same solution will apply to 9.0?

4

Hi @LidDM221

This is Richard from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.header-wrapper.color-background-1.gradient:hover {

background: white !important;

transition: background-color 0.5s ease-in-out;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

2 Likes
5

Hi @PageFly-Richard thanks for providing this! Unfortunately it doesn’t appear to have made a difference - screenshot of how it looks currently attached.

I double checked that the header is sent to ‘Background 1’ for the colour as well.

Is there another solution or a way I can show you the code to see what might be different about Dawn 9.0 maybe?

Screenshot 2023-04-20 164002.jpg
Screenshot 2023-04-20 164002.jpg1897×448 42.7 KB

6

Sorry for missing your message.
I have checked your issue again and noticed that the header is now transparent.
If you need any other support don’t hesitate to let us know.

Best regards,

Richard | PageFly

7

Hi Richard,

Apologies, that is the current live version - it’s a Dawn 9.0 theme version I’m working on that doesn’t have the transparent header and the code that I believe works for the 2.3 version it is currently on doesn’t work on the new version.

Any assistance on this you could offer would be amazing!