-
Posts
-
you can see that behavior on your demo page: 2017 – if you shrink the window to smaller screens.
Header is on wide screens set to transparent but on small screens there is no transparency. See what happens when you scroll and look to the header.Where does the flash come from ? How to avoid it?
well – it seems that it is an effect caused by having a transparent header on wide screens and the change from opacity 0 to 1 and viceversa on header_bg.
there are two classes set or removed av_header_transparency and header-scrolled ( header-scrolled-full ) at the same time.
If you give to the header_bg a background-color to the given needs ( in my case it is white ) the opacity change will not be seen.
in my case the rule :@media only screen and (max-width: 768px) { .responsive #top .header_bg { background-color: #fff !important; opacity: 1 !important; } }solves the problem – and on that enfold-demo page it will do the trick too: https://kriesi.at/themes/enfold-2017/
It seems not to happen that conflict when we have a non-sticky header on wide screens.
Can be closed.
- The topic ‘A flash in the header on small screens’ is closed to new replies.