How can I get a transparent sticky header on Dawn theme?

Store Design
1

Hi,

I was wondering on how I can get a transparent sticky header on my site?

https://eversatori.com
password: pirates

I’ve looked through some other forum posts but wasn’t able to find some coding that would work.

Thank you in advance!

2

If you make a sticky header it will overlap other elements on the page. the sticky header should have some background color.

download (33).png
download (33).png1875×854 101 KB

3

Hi EverSona.

This is PageFly - Free Landing Page Builder. I would love to provide my advice for your store based on 6 years of providing solutions for about 100.000+ active Shopify merchants.

You can go to Online store => themes => Actions => Edit code and paste this code on top of the base.CSS file.

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {

    position: fixed !important;

    top: 0px !important;

    left: 0px !important;

    width: 100% !important;

}

I hope my above information can help you

Kind regards

PageFly

4

@EverSona

Hi,

Please add the code below to assets/base.css file.

.header-wrapper.color-background-1.gradient {
    display: block;
    background: transparent !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

Hope it helps.

Thanks.