Solved

DISABLE TRANSPARANT HEADER IN MOBILE VIEW (DAWN THEME)

Beaumette
Visitor
3 0 1

Hello everyone, 

 

I have encountered another challenge and I hope someone can help me with it.

So, based on a YouTube tutorial, I made my header transparent and when I scrolled down it automatically changed to solid. The tutorial and associated codes I used can be found here:

 

https://websensepro.com/blog/how-to-make-a-transparent-header-in-shopify-dawn-13-0-1/

 

While this looks good on my desktop, it looks terrible on my mobile. Does anyone know how I can keep the transparent header on desktop view, but disable it on mobile view? I would really appreciate it!

 

Website: www.beaumette.com

Password: Beaumette123!

 

Thanks in advance for your assistance and insights!

 

Best regards,

 

Jamal 

Accepted Solution (1)

Rahul_dhiman
Shopify Expert
128 21 37

This is an accepted solution.

Hi @Beaumette ,

 

Please check the video below for solution  

And Add this code to the place I mentioned in the vode 

 

  <style>
    @media screen and (max-width:768px){
      .header-wrapper {
    background: black;
    position: relative;
    width: 100%;
    top: 0px;
}
    }
  </style>

 

 

 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

Replies 3 (3)

Rahul_dhiman
Shopify Expert
128 21 37

This is an accepted solution.

Hi @Beaumette ,

 

Please check the video below for solution  

And Add this code to the place I mentioned in the vode 

 

  <style>
    @media screen and (max-width:768px){
      .header-wrapper {
    background: black;
    position: relative;
    width: 100%;
    top: 0px;
}
    }
  </style>

 

 

 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Beaumette
Visitor
3 0 1

Thank you verry much! You´re a life saver! 😁 

 

Do you maybe also know how I can reduce the height of the header? Both in the desktop version and the mobile version. That would really help me. 

 

Thanks in advance! 

 

Greetings, 

 

Jamal

Spac-es
Shopify Partner
376 109 131

I came up with an interesting solution to the problem you mentioned, I hope you like it!

Add this code in your base.css file:

@media (max-width: 749px) {
  .banner__media.media.scroll-trigger.animate--fade-in {
    height: 100vw !important;
  }
  .banner__media.media.scroll-trigger.animate--fade-in img {
    rotate: 90deg;
  }
}

Result:

code1.PNG 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!