[Resolved] Sticky Navigation disappears on mobile devices/tablets

Home Forums Support [Resolved] Sticky Navigation disappears on mobile devices/tablets

Home Forums Support Sticky Navigation disappears on mobile devices/tablets

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #280848
    Julius

    I only activated sticky navigation (so no navigation, if you are on top of the page). This works perfectly on any computer, but when using this on mobile devices or tablets the navigation disappears (and appears sometimes again) when scrolling (for my eyes just randomly). So I turned on the sticky navigation only for desktop version, but on my iPad it still stays and produces the error. Maybe another interesting fact: This problem occurs not, if I preview my site in customizer or elementor.

    GP Premium 1.2.94
    #280969
    Tom
    Lead Developer
    Lead Developer

    That’s super strange..

    Can you try moving your navigation to the above header location in Customize > Layout > Primary Navigation.

    Then add this CSS to hide it:

    #site-navigation {
        display: none;
    }

    Let me know if that makes a difference ๐Ÿ™‚

    #282116
    Julius

    thanks for your answer, but the problem stays almost exactly the same (desktop version works perfectly, tablet version bugs) – but for me it seems that the sticky navigation on tablet version now only appears, if I scroll to the very end of the site. But then it disappears again randomly…
    Could it be some conflict with “scroll to id” or “elementor” plugin?

    #282212
    Tom
    Lead Developer
    Lead Developer

    Wouldn’t be Elementor, but it might be another plugin. Can you try deactivating them one by one and see if the issue disappears?

    #282694
    Julius

    I deactivated all the other plugins one by one, but the error still persists. I found out, that if I move the navigation above header position and DON’T use your css code

    #site-navigation {
        display: none;
    }

    then everythink works nicely, except that I have a navigation bar at the very top of the page (which I don’t want).

    #282824
    Tom
    Lead Developer
    Lead Developer

    Can you remove the display:none code and let me know so I can take a look?

    #283208
    Julius

    I don’t want to change it on this website, but I set another website to this settings (here exactly the same error appears):

    http://…….

    (above header, sticky, without the css code)

    #283273
    Tom
    Lead Developer
    Lead Developer

    Hmm, can’t seem to reproduce this: https://www.screencast.com/t/diyVWNoxE

    You’ve tried disabling all plugins, custom functions, custom CSS (besides hiding the menu) etc..?

    #283357
    Julius

    I only have 3 plugins (elementor, scroll to id & generatepress), no other custom css and no custom functions.
    The akward thing is, that in customizer (and elementor) mobile or tablet preview everything also works nicely, just as in your screencast video. But if I open my site on my iPhone or iPad the navigation goes crazy again…

    #283691
    Tom
    Lead Developer
    Lead Developer

    This page seems to be working perfectly now?: http://bbvie.at/

    #287092
    Julius

    sorry for the late answer. Unfortunately the site does not work at my test devices, so I uploaded some video proof of the error: https://vid.me/JUKS

    #287222
    Tom
    Lead Developer
    Lead Developer

    Strange issue, can’t pinpoint why this would happen only with the main menu hidden (the sticky nav is a separate element).

    Instead of display:none, try this:

    #site-navigation {
        opacity: 0;
    }
    #287239
    Julius

    Now the sticky navigation works perfectly, but at the top of the page there is some “invisible” gray menu (you can visit the page to see). I tried with height: 0 and combinations of display: none, but nothing worked.

    #287408
    Tom
    Lead Developer
    Lead Developer

    Getting closer! Let’s try this:

    #site-navigation {
        opacity: 0;
        position: absolute;
        top: -200px;
    }
    #287457
    Julius

    getting really close ๐Ÿ™‚ so now there is no gray bar at the top and the sticky navigation still works perfectly! Only if I scroll down (and the sticky navigation appears) and then scroll to the very top of the page again, the sticky navigation doesn’t dissappear …

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