Strange behaviour on video header on mobile

Hi there

thanks for your support. I compressed the video and now is loading fine.
I would like to keep the effect you see on the header in mobile view on this page(www.nencit.ch/language/fr/) even if on some mobiles the video moves and covers the menu. Probably on your mobile you will see something different.

Usually if you go on that page on mobile you see the sections of the header that go in the right place from the beginning on, and the video starts to load at its exact position. Before the cache of the page the video moved and went beneath the upper menu, now on some mobiles it covers the menu.

Coming back to the page concerned in this ticket, www.nencit.fr, I used the exact same settings of the other page, but if you load it you start to see an empty space on the header area and then after a couple of seconds the video moves on the upped empty space covering the area. In that case the viewer has to experience a “kick” because all the content suddenly moves to the upper part but it still remains visible, and this is due because I assigned an upper padding to the content.

I am asking my self why.

As you can see I am not able to find the right compomise. I just understood that the menu style in header area must be sticky and that the cache is involved because after a couple of minutes the video was working fine in the cited page, Can you please help me to understand how to keep the video and sections all at the same good place on all my domains with sydney theme? The video doesn’t have to hide itself , move beneath the menu, cover the menu or suddenly moves in the upper part.

best regards
Fabrizio

Hello Fabrizio,

Please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media only screen and (max-width: 991px) {
    .site-header {
            position: absolute !important;
    }
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hello Rodrigo

Thanks for your reply. Unfortunately I had already that . So it does not solve the issue. what can I do?

    @media only screen and (max-width: 991px) {
        .site-header.fixed {
            position: absolute !important;
        }

        #pg-118-0 > div {
            padding: 150px 0px 100px !important;
        }
    }

regards
Fabrizio

Hi Fabrizio,

As inspected, seems likely you got the space from your page’s content inserted with page builder. Indeed it is out of theme’s code control. But, I’d suggest this CSS code to add to your website’s Additional CSS.

    @media only screen and (max-width: 767px) {
      .site-header,
      .site-header.fixed {
        position: static !important;
      }
      #pg-118-0 > div {
        padding-top: 0 !important;
      }
    }

Regards,
Kharis
aThemes Support

1 Like