How can I create a transparent header for Publisher Theme?

Solved

How can I create a transparent header for Publisher Theme?

kritikozzz
Excursionist
37 0 4

Hi, 

 

I am looking to make my header transparent for my Publisher Theme.

Site: www.aurabyangelo.com

Code Request: Make the header background transparent (for desktop AND mobile) without it affecting my announcement bar. 

 

Thank you! 

-A 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

This is an accepted solution.

Hi @kritikozzz 

You can do that by adding this code in your theme.liquid file, before </head> tag in Online store > Themes > Edit code 

 

{% if template == 'index' %}
<style>
#MainContent { margin-top: -133px; }
sticky-header { background: transparent !important; }
@media (max-width: 767px) {
#MainContent { margin-top: -107px !important; }
}
</style>
{% endif %}

 

Screenshot 2023-11-03 at 09.05.02.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

This is an accepted solution.

Hi @kritikozzz 

Please update code to this 

{% if template == 'index' %}
<style>
#MainContent { margin-top: -133px; }
@media (max-width: 767px) {
#MainContent { margin-top: -107px !important; }
}
</style>
{% endif %}
<style>
sticky-header { background: transparent !important; }
</style>

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 48 (48)

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

This is an accepted solution.

Hi @kritikozzz 

You can do that by adding this code in your theme.liquid file, before </head> tag in Online store > Themes > Edit code 

 

{% if template == 'index' %}
<style>
#MainContent { margin-top: -133px; }
sticky-header { background: transparent !important; }
@media (max-width: 767px) {
#MainContent { margin-top: -107px !important; }
}
</style>
{% endif %}

 

Screenshot 2023-11-03 at 09.05.02.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kritikozzz
Excursionist
37 0 4

Worked! Thank you! 

kritikozzz
Excursionist
37 0 4

Question - is there a way to make it transparent across all pages? Right now its only on my homepage, but the white background appears on shop and contact etc. 

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

This is an accepted solution.

Hi @kritikozzz 

Please update code to this 

{% if template == 'index' %}
<style>
#MainContent { margin-top: -133px; }
@media (max-width: 767px) {
#MainContent { margin-top: -107px !important; }
}
</style>
{% endif %}
<style>
sticky-header { background: transparent !important; }
</style>

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kritikozzz
Excursionist
37 0 4

This did not work unfortunately 

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Did you update previous code with new one and save file?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kritikozzz
Excursionist
37 0 4

Yes 

kritikozzz
Excursionist
37 0 4

Wait, now it works! Took a second to refresh, thank you! 

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Glad I could help. Have a great day

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kritikozzz
Excursionist
37 0 4

I did notice my announcement bar is a bit clipped on the bottom... the text is no longer centered in the black frame? Could the code we added adjust this? 

Popularitems
Tourist
17 0 2

Hey, my mobile version of site is not letting me make the header transparent on just the home page. Can you help?

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Hi @Popularitems 

Please send me your store URL so I can check and help you

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

Popularitems.com thank you so much

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Please go to your Online Store > Themes > Edit code > open theme.scss.liquid file, find and remove this code around line 6925 of this file

 

  @media screen and (max-width: 769px) {
    .header-section .header-container {
      position: initial; } }

Screenshot 2024-03-13 at 16.06.48.png

 

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

It’s not there

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

You can add this code to your theme.liquid file after <head> to solve it 

<style> 
@media screen and (max-width: 769px) {
    .header-section .header-container {
      position: absolute !important; 
    } 
}
</style> 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

thank you but now on the product page, and search page. It’s trying to be transparent and I do not want it to be. Please check

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Code updated

{% if template == 'index' %}
<style> 
@media screen and (max-width: 769px) {
    .header-section .header-container {
      position: absolute !important; 
    } 
}
</style> 
{% endif %}

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

IMG_2318.png

Popularitems
Tourist
17 0 2

Just sent a coffee your way for the help. Thank you

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Thank you and welcome!

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

Do you know why my site is slow? I already removed all apps and app code from my site. 

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Let me look into and will let you know

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Hi @Popularitems 

After checking on my PC, your site loads quite fast. However, if using PageSpeed Insights, the score is a little low. You can solve this by disabling lazy load from the hero banner and logo. 

I also recommend you convert images of the hero banners to .webp format to make the site load faster.

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

IMG_2325.png

Hey Dan, all of the sudden my products on the product page and featured catalog are different sizes, how do I make them all even sizes?

Popularitems
Tourist
17 0 2

I messed up my code please help

 

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Did you do something with your theme.scss.liquid file? 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

Yes

 

Popularitems
Tourist
17 0 2

i added it at the bottom

Popularitems
Tourist
17 0 2

and then deleted it

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

You removed something that belongs to the file, not just the code you added. Please try to press Ctrl + Z(window) or command + Z(Mac) to revert it and try to save file and check again

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

still not working

Popularitems
Tourist
17 0 2

Okay i fixed it. Can you teach me how to make the catalog grid even with the pictures and the titles on home page

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Could you explain more about your question?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

manan123
Pathfinder
179 1 23

hii i added two custom liquid for videos at different places but when i change the width of one custom liquid its automatically changes the width of other two i want to change the width of only one custom liquid  please help me 

 

my site url ; https://mansaroverfurnishings.com/

 
Dan-From-Ryviu
Shopify Partner
10094 2006 2058

You can try to add the CSS code to Custom CSS of Custom liquid section that you want to change the width.

Screenshot_2.jpg

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

manan123
Pathfinder
179 1 23

can you please tell me the code?

 

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

How did you change the width before?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

Hey Dan Popularitems here again. You gave me a code to fix mobile transparency on the header earlier. Now the estimated delivery date is not working and the product images/titles on the home page collections grid is the wrong size. Do you know why these things could have happened?

 

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

I guess make some mistake when adding or remove code somewhere

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems
Tourist
17 0 2

Any suggestions on fixing it?

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Could you take screenshot where did you edit the code?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

manan123
Pathfinder
179 1 23

Hey im using dawn theme & want to add slider in testimonials please help me to do so...

my site url :https://mansaroverfurnishings.com/

 

see screenshot for reference

 

manan123_0-1710579832057.png

 

dilan1994
Visitor
3 0 0

Hello , 

 

My theme.liquid file does not include </head>. I can only find <head>. 

 

Is there somewhere else it can work? 

 

 

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

Yes, please add the code after <head> 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

dilan1994
Visitor
3 0 0

it didnt really work. its just moved the header down slightly. 

 

Screenshot 2024-04-07 at 10.20.19 am.png

dilan1994
Visitor
3 0 0

this is what i want it to look like. 

 

Screenshot 2024-04-07 at 10.24.17 am.png

MRamzan
Shopify Partner
339 3 35

Publisher theme transparent header:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112