[Resolved] Sticky Navigation disappears on mobile devices/tablets

[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.

[Tom]

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 🙂

[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?

[Tom]

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

[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).

[Tom]

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

[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)

[Tom]

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..?

[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…

[Tom]

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

[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

[Tom]

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;
}

[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.

[Tom]

Getting closer! Let’s try this:

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

[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 …

[Author]

Posts