Header Transparent mobile only on banner

omar_ab · ‎07-21-2024

How can I make my header transparent on mobile only when its near the banner. Here is an example of what I am looking for!

The header comes back to its normal color when you scroll down! My website link is:

moroccanplus.com

BSSCommerce-HDL · ‎07-21-2024

Hi @omar_ab,

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: 767px) {
  .header-sticky.site-header--sticky.site-header--transparent.active {
    background: #d76d6d !important;
    position: sticky;
    top: 0;
  }

  .header-sticky.site-header--sticky.site-header--transparent{
    background-color: transparent !important;
    position: fixed;
    width: 100%;
    top: 42px;
    left: 0;
  }
}
</style>

Here is result:

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

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

Hi @omar_ab

You can do that by adding this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
@media (max-width: 759px) {
.template-index .site-header { background: transparent; } 
.template-index .page-container {
margin-top: -70px;
}
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.