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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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?

- Helpful? Like and Accept solution!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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>

- Helpful? Like and Accept solution!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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.

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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?

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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 😍

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

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
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