Solved

Making header invisible, merging it with image banner

washed
Tourist
7 0 1

With the new ride update my previous code to make the header transparent no longer works. 

 

This was the previous code: 

{% if template == 'index' %}

<style>
.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 20px;
}
</style>

{% endif %}

 

What I want:                                                                                     

scrnli_5_8_2024_8-32-02 PM.png

Current:

scrnli_5_8_2024_8-30-36 PM.png

PLEASE HELP

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7721 1502 1508

This is an accepted solution.

Hi @washed 

You can try to use this code 

<style>
.header-wrapper{
background: transparent !important;
}
#MainContent {
margin-top: -90px;
}
</style>

{% endif %}

Change -90px to make it fit with height of your header

- Helpful? Like and Accept solution or Buy me a 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

Dan-From-Ryviu
Shopify Partner
7721 1502 1508

This is an accepted solution.

Please use this code

{% if template == 'index' %}
<style>
.header-wrapper{
background: transparent !important;
}
#MainContent {
margin-top: -90px;
}
</style>
{% endif %}

 

- Helpful? Like and Accept solution or Buy me a 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 8 (8)

BSSTech-Venture
Shopify Expert
391 96 105

Hi
Can you kindly share your store link (with the password, 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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

washed
Tourist
7 0 1

washedclothing.com

Dan-From-Ryviu
Shopify Partner
7721 1502 1508

This is an accepted solution.

Hi @washed 

You can try to use this code 

<style>
.header-wrapper{
background: transparent !important;
}
#MainContent {
margin-top: -90px;
}
</style>

{% endif %}

Change -90px to make it fit with height of your header

- Helpful? Like and Accept solution or Buy me a 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

washed
Tourist
7 0 1

Thank you for the response Dan, I was wondering where I should put this code, I cant wait to try it!

washed
Tourist
7 0 1

is there anyway to only have it as an invisible header on the homepage

because it is glitching on my other pages                                       

scrnli_5_9_2024_7-09-42 PM.png

scrnli_5_9_2024_7-07-04 PM.png

Dan-From-Ryviu
Shopify Partner
7721 1502 1508

This is an accepted solution.

Please use this code

{% if template == 'index' %}
<style>
.header-wrapper{
background: transparent !important;
}
#MainContent {
margin-top: -90px;
}
</style>
{% endif %}

 

- Helpful? Like and Accept solution or Buy me a 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

washed
Tourist
7 0 1

Thank you!

Dan-From-Ryviu
Shopify Partner
7721 1502 1508

Very welcome! 

- Helpful? Like and Accept solution or Buy me a 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