How do I make a Transparent Header

Solved

How do I make a Transparent Header

SoulHarvest
Tourist
13 0 11

Hi, I'm trying to make a header like the one on the https://fearofgod.com/ website. It's transparent with a slideshow behind it, then it turns white when scrolling and it is sticky. Also, this is only on the homepage, the header is sticky and white on every other page.

 

I've found some discussions about this online but none of them worked.

 

Does anyone know how to do this? I'm using the dawn theme 15

Accepted Solution (1)
BSSCommerce-HDL
Shopify Partner
1043 351 422

This is an accepted solution.

Hi @SoulHarvest

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1719838955724.png

 

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

 

<style>
  .shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
    position: fixed !important;
    background-color: transparent !important;
    max-width: 100%;
    width: 100%;
    border-bottom: 0;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: white!important;
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 24 (24)

BSSCommerce-HDL
Shopify Partner
1043 351 422

Hi @SoulHarvestCan you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

Hi, Thank you for the help. my site is https://soulharvestshop.com and the password is thiagh 

I followed some old tutorials and did manage to make the header transparent, but it doesn't become white on scroll, and it doesn't sticky. so it's just transparent at the top. Because of that I've just undone all of it and reverted to a standard header with no CSS or anything. I have no CSS/HTML/JS experience so that's why I've been looking and asking for help on these forums. 

BSSCommerce-HDL
Shopify Partner
1043 351 422

This is an accepted solution.

Hi @SoulHarvest

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1719838955724.png

 

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

 

<style>
  .shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
    position: fixed !important;
    background-color: transparent !important;
    max-width: 100%;
    width: 100%;
    border-bottom: 0;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: white!important;
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

Thank you! This worked exactly like the fearofgod site, thank you for your help!

BSSCommerce-HDL
Shopify Partner
1043 351 422

@SoulHarvest, No problem. Have a good day 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

Edit: Just a note for anybody else seeing this and wanting to try it. This works on PC and android perfectly, it seems to bug out on iOS, not sure quite why (I've tried it on safari and brave browser on an iphone, the header is transparent and becomes white but it doesn't sticky properly, it jumps around while you scroll)

BSSCommerce-HDL
Shopify Partner
1043 351 422

Hi @SoulHarvest, i can't access your site

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

Hi, I've changed the password to 123bird 

BSSCommerce-HDL
Shopify Partner
1043 351 422

Hi @SoulHarvest, Replaced my old code with this new code: 

<style>
  .shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
    position: fixed !important;
    background-color: transparent !important;
    max-width: 100%;
    width: 100%;
    border-bottom: 0;
    top: 0 !important;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: white!important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

Hi, I'm sorry for asking so many questions. I've tried this code and it does now work on ios also but I wanted to ask if there is a solution for this issue where the header covers stuff below it, i've attached a screenshot to show what i mean. The header goes a bit too low on both desktop and mobile, I understand if you are not able to help with this as you have already helped a lot! Thank you so much for everything anyways.

IMG_0473.jpeg

BSSCommerce-HDL
Shopify Partner
1043 351 422

@SoulHarvest, Do you think we should only make the home page transparent? It would be better if we made all the pages whole. I see many guest websites only do it on their homepage

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

Yes I think only having that effect on the homepage would be good, so every other page has a normal sticky header.

BSSCommerce-HDL
Shopify Partner
1043 351 422

@SoulHarvest  Okay. So now I will give you the solution wait for me a moment. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-HDL
Shopify Partner
1043 351 422

Hi @SoulHarvestReplaced my old code with this new code: 

 

{% if template.name == index %}
    <style>
  .shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
    position: fixed !important;
    background-color: transparent !important;
    max-width: 100%;
    width: 100%;
    border-bottom: 0;
    top: 0 !important;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: white!important;
}
</style>
{% endif %}

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

Hi, I've added this code now but the effect has disappeared from the home page also, did I make a mistake? I pasted it in the theme.liquid file, here's a screenshot of my file: 

e.png

Screenshot 2024-07-01 171217.jpg

BSSCommerce-HDL
Shopify Partner
1043 351 422

Hi @SoulHarvestInsert this code above </head> tag: 

BSSCommerceHDL_0-1719850746402.png

 



 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

Hi, is this correct ? I've added this code in the section you mentioned but it doesn't work

{% if template.name == index %}
<style>
.shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
position: fixed !important;
background-color: transparent !important;
max-width: 100%;
width: 100%;
border-bottom: 0;
top: 0 !important;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
background-color: white!important;
}
</style>
{% endif %}

 

header.jpg

BSSCommerce-HDL
Shopify Partner
1043 351 422

Hi @SoulHarvest

Can I send a collaborator access to your theme? Then I can check and directly add code to help your issue.

Please share your collaborator request code from the Users and permissions page.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

The collaborator request code is 3605

BSSCommerce-HDL
Shopify Partner
1043 351 422

Hi @SoulHarvest

We have just sent you a collaborator request to Shopify Admin => Settings => Users and Permissions => Collaborators => BSS Commerce to have access and check your settings. Then, we can check and suggest you something. After accepting the request, please kindly keep me updated.

Thanks so much in advance!

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

I've accepted the request and gave permission for the theme

BSSCommerce-HDL
Shopify Partner
1043 351 422

Hi @SoulHarvest, i fixed it, I forgot the two single quote in the word index because it should be a string.  My bad 😔

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SoulHarvest
Tourist
13 0 11

I have just checked the website and it seems you have added the feature like the fearofgod.com website, I have to go for now, but when i return I will donate to you for your help, thank you so much, genuinely

BSSCommerce-HDL
Shopify Partner
1043 351 422

@SoulHarvest  Thank you so much. Have a good day 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency