Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1370380


    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


    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 {

    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.


    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


    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:

    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;
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.