Re: Dawn Theme: Transparent fixed header

How can I get a fixed transparent header in the Dawn theme?

byrdsvintage
Tourist
13 0 3

Would like to have a transparent header, which is fixed in a banner when scrolling. 

Heres my shop with the link: https://tyyhbpyu5glzzb4f-77703315800.shopifypreview.com

Thanks for your help! 

Replies 9 (9)

Artzen_tech
Shopify Partner
536 107 108

Hello @byrdsvintage 
Its Artzen Technologies! We will be happy to help you today.


You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
.shopify-section-header-sticky sticky-header {
    position: fixed;
    width: 100%;
    background: transparent;
}
</style>

 

Artzen_tech_0-1695986644740.png

 

 

Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
byrdsvintage
Tourist
13 0 3

It worked the other way around. I want the header at the beginning of the page transparent and when scrolling down fixed in a non-transparent header. 

Artzen_tech
Shopify Partner
536 107 108

Use this code instead of first :-

 

<style>
sticky-header.header-wrapper.gradient.header-wrapper--border-bottom {
    position: fixed;
    width: 100%;
    background: #f7f5f5;
}
.shopify-section-header-sticky sticky-header {
    background: transparent;
}
</style>

 

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
byrdsvintage
Tourist
13 0 3

Still didnt work. The header at the beginning of the page is not transparent...

Artzen_tech
Shopify Partner
536 107 108

Add this

<style>
sticky-header.header-wrapper.color-scheme-4971f8df-ac1a-4bc8-87a3-5f9144a6de68.gradient.header-wrapper--border-bottom {
    position: fixed;
    width: 100%;
    background: transparent;
}
.shopify-section-header-sticky sticky-header {
    background: #f7f5f5!important;
}
</style>
If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Artzen_tech
Shopify Partner
536 107 108

@byrdsvintage if this solution helpful for you then please accept it

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
byrdsvintage
Tourist
13 0 3

Now it is like i want it but unfortunately there are two little things that needed to be changed: 
1. There is a line under the header. I want to remove it

2. You cannot see the full page, because the header covers it. So there need to be some distance between header and the product page added. 

 

You can see it here very well: 

byrdsvintage_0-1695998028903.png

 

Made4uo-Ribe
Shopify Partner
6978 1661 2051

Hi @byrdsvintage 

Try this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.section-template--20558264566104__product-grid-padding .facets-vertical.page-width {
    padding-top: 100px;
}
section#shopify-section-template--20558264959320__main {
    padding-top: 100px;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1695999218676.png

 

Please, Dont forget to Mark Solution the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
byrdsvintage
Tourist
13 0 3

Can you send me the full CSS for the following link, because its not working.. 

Link: 
https://mw3hpqj9i702j2eo-77703315800.shopifypreview.com