Mobile header blinking - Support | Kriesi.at

Tagged: blinking, header, sticky

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
October 26, 2022 at 6:11 pm #1370380

Petros
Participant

Hi,

I’ve set up the header to be sticky on mobile, as well as on desktop.

On mobile tho there is a strange behaviour, when scrolling down the header blinking for 1 second and then keep working properly.
We need to avoid the second. You can test it by yourself here from mobile version http://sneakacesv2.onpressidium.com

October 27, 2022 at 8:06 am #1370406
Guenni007
Participant
you should work on your transparency colors ( menu and logo)

for mobile it would be better to have on all headers ( transparency or not ) a black fill of your svg class.
the blinking comes from the header-bg change on transparency to non-transparency:
```
@media only screen and (max-width: 767px) {
  #header .logo .cls-1 {
    fill: #000;
  }
  .responsive #top .av_header_transparency .header_bg {
    background-color:#fff;
    opacity:1
  }
}
```
October 29, 2022 at 12:24 pm #1370626

Guenni007
Participant

now you got a shrinking header on mobile – did you edit your avia-snippet-sticky-header.js
( respectively your avia-snippet-sticky-header.min.js) ?
And an additional header component is present ( cart ) – maybe it is better to put that cart icon to av-logo-container navigation div.

October 29, 2022 at 1:28 pm #1370629

Petros
Participant

Hello, no I didn’t edit any script.

I just added your code and it seems to working properly. What do you mean exactly ? :)

Thank you

October 30, 2022 at 2:24 am #1370687
Guenni007
Participant
well – the great benefit of inline svg files is that they can be addressed from outside with css.
So you do not need to have here that gif behind the logo. And on scrolled header to display the one the other not.
your logo – reworked a bit with text editors will have all you need to make things visible or not – or to move parts inside the svg file.

A logo in this way you can influence by:
```
#header.header-scrolled svg .branding {
  opacity: 0;
  transition: opacity 1s ease;
}
```
Thats it – and you do not have to look for if the one image has the same dimensions as the other. One graphic for all.
you find your logo here: https://webers-testseite.de/sneakaces.svg

next is the colors – you can influence them for each page/post or transparency you like.
you have your color class – so you can decide on transparency to have a white logo
either over header class: header-transparency or :not selector
```
#header:not(.header-scrolled) .cls0 {
  fill: #FFF;
}
```
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.