transparent header

Solved

transparent header

guiguimorning
Tourist
10 0 1

hello community , 
ust added the feature of the transparent header in DAWN theme  with some coding ( from tutorials ) . it works very well on desktop version but in mobile one no .
the text and colors icone stays in black , putted them in white . ( easy explication ) .
anyone has a solution please? the assistance told me that it needs coding skills and i don't know how to manage that .

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8382 1650 1661

This is an accepted solution.

Your logo is hidden by default without my code. But you can solve it by adding this additional code 

<style>
@media (max-width: 749px) {
sticky-header { padding-top: 16px !important; }
.shopify-section-header-sticky sticky-header { padding-top: 0px !important; }
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 11 (11)

PageFly-Amelia
Shopify Partner
493 154 222

Hi @guiguimorning 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

Could you please share the URL link of your store so we can check it for you?

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

guiguimorning
Tourist
10 0 1
##-themorningchoice.com -##

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

Hi @guiguimorning 

Your store is password protected. Please provide the password so I can check and give you solution. 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

guiguimorning
Tourist
10 0 1
##- oh sorry, 1907 -##
Dan-From-Ryviu
Shopify Partner
8382 1650 1661

Please add this code to theme.liquid file after <head> in Online Store > Themes > Edit code 

 

<style>
@media (max-width: 749px) {
.header__icon, .header__icon--cart .icon { color: #fff !important; }
.shopify-section-header-sticky .header__icon, 
.shopify-section-header-sticky .header__icon--cart .icon { color: #000 !important; }
}
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

guiguimorning
Tourist
10 0 1

Just did it ! Thank you very much 🙏

guiguimorning
Tourist
10 0 1

can i ask more one question please , i think no code needed but did not found the solution :
How to center the text menu ( in desktop ) , cause looks like going to left .
thx

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

Please add this addition CSS code 

<style>
@media (min-width: 990px) {
    .header--middle-left { grid-template-columns: auto auto auto !important; }
    .header--middle-left .header__inline-menu { text-align: center; }
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

guiguimorning
Tourist
10 0 1

did it , thx

 

guiguimorning
Tourist
10 0 1

with this code in mobile version , the centred logo beame hidden by the announcement bar

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

This is an accepted solution.

Your logo is hidden by default without my code. But you can solve it by adding this additional code 

<style>
@media (max-width: 749px) {
sticky-header { padding-top: 16px !important; }
.shopify-section-header-sticky sticky-header { padding-top: 0px !important; }
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.