Disable transparant header in mobile view (dawn theme)

Store Design
, ,
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

2

Hi @Beaumette ,

Please check the video below for solution

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

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
code1.PNG356×591 127 KB

4

Thank you verry much! You´re a life saver! :grin:

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