How can I create a transparent and sticky header on the Dawn theme?

Store Design
1

Hi there,

Can someone please help me with the Dawn theme?

I want my header to be transparent on the home page so my image goes behind it, but not transparent on other pages.

I also want the menu header to be sticky.

Other solutions with codes haven’t seemed to work.

Kind Regards,

Georgina

2

Hi @georginab !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation

In your theme.liquid file in your layouts folder add this style code and condition right after the closing tag:

{% if template.name == ‘index’ %}

.header-wrapper { position: fixed; top: 0; width: 100%; } .header__menu-item, .header__active-menu-item, .header__icon .icon { color:#fff } .header__menu-item:hover{ color:#fff; }

{% endif %}

Best Regards;

Pagefly

3

@georginab

Could you provide me store URL? I should be able to answer your question.

Yours faithfully!

4

This made my header sticky but now I cannot see any menu icons and it is a while block.

5

my site is not live. It’s just the DAWN theme, no changes.

6

Hi @georginab again

Please remove this code from the code which I sent you earlier

.header__menu-item, .header__active-menu-item, .header__icon .icon {
color:#fff
}

.header__menu-item:hover{
color:#fff;
}

Best Regards,
PageFly

7

Thanks, it is still not transparent though. How can I do that?

8

Hi @georginab

For that you don’t need any code. You just to make two modifications in your shopify theme customiser

1)Please make the color scheme for the header to be Accent 1
2)Then in theme settings, in colors, please make the Accent 1 color set to none so that it is transparent. Please check the video here https://www.loom.com/share/320676b412304d2a966910015ff5bba5.

Best Regards,
PageFly

9

Thank you SO SO MUCH! This is the only thing that fixed it after searching for hours through threads. Thank you! God Bless.

10

Welcome bro :blush: