Solved

Transparent header dawn theme 12.0

Hoppop
Tourist
20 0 1

can anyone help me to place transparent header in dawn 12.0 tries various ways but not helped

Accepted Solutions (2)
websensepro
Shopify Partner
873 117 126

This is an accepted solution.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

sticky-header.header-wrapper.color-accent-1.gradient.header-wrapper--border-bottom {
    position: absolute;
    background: transparent;
    width: 100%;
}

Result:

websensepro_0-1704896625482.png

And please let me know This code work for you.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

websensepro
Shopify Partner
873 117 126

This is an accepted solution.

Add this CSS code base.css file at the bottom.

.list-menu__item {
    color: black;
}

.header__menu-item:hover {
    color: black;
}

.header__menu-item:hover .header__active-menu-item {
    color: black;
}

 

websensepro_0-1704898752651.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 24 (24)

Moeed
Shopify Partner
3554 893 1111

Hey @Hoppop 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
Hoppop
Tourist
20 0 1

websensepro
Shopify Partner
873 117 126

Hi, @Hoppop.

Follow these Video I hope this works for you.

https://www.youtube.com/watch?v=Z1JelHGDjMU

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Hoppop
Tourist
20 0 1

tried your video before your comment and it was helpful but didnt worked for me 

websensepro
Shopify Partner
873 117 126

Do you like this header transparent?

websensepro_0-1704893216979.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Hoppop
Tourist
20 0 1

IMG_0319.jpgIMG_0320.jpg

Hoppop
Tourist
20 0 1

yes

 

Hoppop
Tourist
20 0 1

how were you able to edit my store? and how to do it ?

Hoppop
Tourist
20 0 1

it shows codes on my store header

websensepro
Shopify Partner
873 117 126

Yes, this is your store please let me you like this header.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Hoppop
Tourist
20 0 1

? how do i get transparent header

websensepro
Shopify Partner
873 117 126

I will provide a code you can paste into your CSS file.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Hoppop
Tourist
20 0 1

ok do guide the steps

Hoppop
Tourist
20 0 1

waiting for your reply

websensepro
Shopify Partner
873 117 126

This is an accepted solution.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

sticky-header.header-wrapper.color-accent-1.gradient.header-wrapper--border-bottom {
    position: absolute;
    background: transparent;
    width: 100%;
}

Result:

websensepro_0-1704896625482.png

And please let me know This code work for you.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Hoppop
Tourist
20 0 1

where is base.css to paste this code in the start or end?

websensepro
Shopify Partner
873 117 126

end

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Hoppop
Tourist
20 0 1

and how do i change the colour of menu items

websensepro
Shopify Partner
873 117 126

Share your store password.

websensepro_0-1704897873577.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Hoppop
Tourist
20 0 1

i have removed the password

websensepro
Shopify Partner
873 117 126

This is an accepted solution.

Add this CSS code base.css file at the bottom.

.list-menu__item {
    color: black;
}

.header__menu-item:hover {
    color: black;
}

.header__menu-item:hover .header__active-menu-item {
    color: black;
}

 

websensepro_0-1704898752651.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Hoppop
Tourist
20 0 1

sorry disturbing you again and again but one last thing why is that home button white its not black

Hoppop
Tourist
20 0 1

the home button is white

Hoppop
Tourist
20 0 1

waiting