Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 27, 2021 at 11:17 am #1326641
    domchocolate

    Hi

    I have this site http://www.djr.work.

    I have a transparent header with a reversed/white out logo and on-scroll the header goes white, shrinks and the logo swaps to gold.

    It works as it should on desktop – which is great

    And goes to non-opaque header on mobile – which is great

    On tablet, however, it goes transparent but uses the gold logo and not the reversed/white out logo as it should (so can’t be seen). The sticky header is also not working and is very buggy as the scroll happens.

    It’s fine on iPad Pro tablet resolutions – it seems just to be between (min-width: 768px) and (max-width: 989px).

    I can’t see any CSS doing this – any ideas? It seems like the script is trying to follow both mobile and desktop at the same time and delivering a buggy, bastardized rendering.

    Thanks in advance

    Dominic

    October 28, 2021 at 11:13 am #1326794
    Ismael

    Hey domchocolate,

    Thank you for the inquiry.

    On tablet, the header should behave exactly the same as it does on mobile or phone view. And it is not displaying as it should because of this css modification in the style.css file.

    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
    background: transparent!important;
    position: absolute!important;
}

    This is how the header looks on tablet view when we disabled the css.

    Screenshot: https://imgur.com/qBDGJkA

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.