Transparent Header On Mobile Problems

LeviFurey · ‎08-20-2024

hello,

i have recently made my header transparent using custom code. It works perfectly fine however on mobile when i press the menu icon to open the menu the header will stay transparent whereas the rest of the menu going down the page will be black. Im also using refresh theme.

Does anyone have a fix so the header will change to black when the mobile menu is opened?

Thanks

BSSCommerce-HDL · ‎08-20-2024

Hi @LeviFurey,

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

Step 2: Search file theme.liquid

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

<style>
@media only screen and (max-width: 749px) {
sticky-header.header-wrapper::before {
    position: absolute;
    content: '';
    background-color: black;
    width: 100vw;
    height: 68.2px;
    z-index: -1;
    top: 0;
    left: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .2s ease, visibility .2s ease;
}

sticky-header.header-wrapper:has(.menu-drawer-container.menu-opening)::before {
    visibility: visible;
    transform: translateX(0);
}
}
</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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL · ‎08-21-2024

Hi @LeviFurey , Pls replace my old code to new code:

<style>
@media only screen and (max-width: 749px) {
sticky-header.header-wrapper::before {
    position: absolute;
    content: '';
    background-color: black;
    width: 100vw;
    height: 85px;
    z-index: -1;
    top: 0;
    left: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .2s ease, visibility .2s ease;
}

sticky-header.header-wrapper:has(.menu-drawer-container.menu-opening)::before {
    visibility: visible;
    transform: translateX(0);
}
}
</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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Dan-From-Ryviu · ‎08-20-2024

Hi @LeviFurey

Could you share the link to your store?

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

LeviFurey · ‎08-20-2024

hello

https://theaquacure.com.au/

Dan-From-Ryviu · ‎08-20-2024

Please add this code to theme.liquid file, after <head>

<style>
.header-wrapper:has(.menu-drawer-container[open]) { background: #000000 !important; }
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

LeviFurey · ‎08-20-2024

Yes, thank you this, however when i press the header there is no sliding animation that matches with the menu, the header just kind of pops into colour. and you can see a difference when clicking off the menu.

BSSCommerce-HDL · ‎08-20-2024

Hi @LeviFurey, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

LeviFurey · ‎08-20-2024

hi

https://theaquacure.com.au/

BSSCommerce-HDL · ‎08-20-2024

Hi @LeviFurey,

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

Step 2: Search file theme.liquid

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

<style>
.header-wrapper:has(.menu-drawer-container.menu-opening) { 
   background-color: black !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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

LeviFurey · ‎08-20-2024

yes this works thankyou, however when i press the header there is no sliding animation that matches with the menu, the header just kind of pops into colour. and you can see a difference when clicking off the menu.

BSSCommerce-HDL · ‎08-20-2024

Hi @LeviFurey,

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

Step 2: Search file theme.liquid

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

<style>
@media only screen and (max-width: 749px) {
sticky-header.header-wrapper::before {
    position: absolute;
    content: '';
    background-color: black;
    width: 100vw;
    height: 68.2px;
    z-index: -1;
    top: 0;
    left: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .2s ease, visibility .2s ease;
}

sticky-header.header-wrapper:has(.menu-drawer-container.menu-opening)::before {
    visibility: visible;
    transform: translateX(0);
}
}
</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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

LeviFurey · ‎08-20-2024

Thats perfect!

thank you so much!

BSSCommerce-HDL · ‎08-20-2024

@LeviFurey, No problem. Have a good day 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

LeviFurey · ‎08-20-2024

Sorry 1 very last minor issue, there is like a super tiny seperator line between the header and menu on mobile.

Any fix for this?

BSSCommerce-HDL · ‎08-20-2024

@LeviFurey, Can you take me a picture of this problem?

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

LeviFurey · ‎08-21-2024

BSSCommerce-HDL · ‎08-21-2024

Hi @LeviFurey , Pls replace my old code to new code:

<style>
@media only screen and (max-width: 749px) {
sticky-header.header-wrapper::before {
    position: absolute;
    content: '';
    background-color: black;
    width: 100vw;
    height: 85px;
    z-index: -1;
    top: 0;
    left: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .2s ease, visibility .2s ease;
}

sticky-header.header-wrapper:has(.menu-drawer-container.menu-opening)::before {
    visibility: visible;
    transform: translateX(0);
}
}
</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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

LeviFurey · ‎08-21-2024

there we go, it works!

thankyou so much

BSSCommerce-HDL · ‎08-21-2024

@LeviFurey, I glad to have helped you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Transparent Header On Mobile Problems

Transparent Header On Mobile Problems

Community Blog Articles