Re: Make the header transparent on the homepage ONLY - Dawn theme

emmadub · ‎07-23-2024

Hi,

I have tried every other method on the shopify discussions and none of them work.

I am trying to make the header transparent on the homepage only on my site. I have Dawn version 15.0

AK_Design_Dev · ‎07-23-2024

Hello @emmadub

U can use index class then and the add css

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.

Your Willpower Contribution Link:-

Contribution

Contact On My Mail :-mail@gmail.com

emmadub · ‎07-24-2024

I don't know what this means 💀 im not a developer, in laymans terms?

AK_Design_Dev · ‎08-09-2024

Then share store url i can fix it

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.

Your Willpower Contribution Link:-

Contribution

Contact On My Mail :-mail@gmail.com

emmadub · ‎08-19-2024

Hi, I messaged it to you

AK_Design_Dev · ‎08-21-2024

Okay

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.

Your Willpower Contribution Link:-

Contribution

Contact On My Mail :-mail@gmail.com

Dan-From-Ryviu · ‎07-23-2024

Hi @emmadub

Would you share link of your store so I can provide the code to do that?

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

ProtoMan44 · ‎07-23-2024

@emmadub Hey, thanks for posting here.

use the template condition to set a class for home page like this:

<header class="site-header {% if template.name == 'index' %} transparent-header {% endif %}">

then on base of class add CSS:

.transparent-header {
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.transparent-header .site-nav {
  background-color: transparent;
}

I hope it will work otherwise contact me back,
by the way which theme are active on your store.
thanks.

- A thirsty developer passionate about supporting the community. If you'd like to, you can

Buy me a Coffee.✨️

- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

-

Chat On Whatsapp

Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

emmadub · ‎07-24-2024

Hi, Where do i add the codes? I have little-0 experience but i can copy and paste haha.

I am actively using Dawn 15.0.0 theme

ProtoMan44 · ‎07-25-2024

@emmadub Hi ,
edit your theme.liquid and put it as a class in <header> tag:

{% if template.name == 'index' %} transparent-header {% endif %}

then open any .css file like theme.css, global.css, or base.css then put this code at bottom of the file:

.transparent-header {
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.transparent-header .site-nav {
  background-color: transparent;
}

if it does not work so please get in touch with me. thanks

- A thirsty developer passionate about supporting the community. If you'd like to, you can