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

Store Design
, , , ,
1

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!

2

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 tag

Artzen_tech_0-1695986644740.png
Artzen_tech_0-1695986644740.png1355Ă—647 166 KB

Let me know if need further assistance
Regards,
Artzen Technologies

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.

4

Use this code instead of first :-
5

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

6

Add this
7

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

8

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
byrdsvintage_0-1695998028903.png2864Ă—1428 167 KB

1 Like
9

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;
}

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

10

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

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