DISABLE TRANSPARANT HEADER IN MOBILE VIEW (DAWN THEME)

[Beaumette]

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 

[Rahul_dhiman · 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>

[Beaumette]

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]

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: