[Resolved] Bottom menu on mobile bug

[Stew]

I implemented the code from another support post to enable a bottom sticky menu on mobile. (From this github)

I fine tuned styling how I wanted it, and things were looking good. However when I scroll the menu ends up taking up the whole screen and the header goes back to the top. When I scroll back to the top of the page it corrects itself. I’ve added a link to my staging site where I’ve tested disabling every plugin. I’ve left only elementor, GP premium, and woocommerce running. Note, this only happens on mobile.

[Fernando]

Hi Stew,

Can you take a screen shot of the issue from your end? I can’t seem to replicate the issue from my end.

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Stew]

Link to IMGUR video in the private section.

[Fernando]

I see. I’m not experiencing that issue on my end on your site. I also tested on my personal phone to be sure, and it looks as expected there as well when scrolling.

Can you try clearing the cache of your browser? If that doesn’t work, try using a different browser to test.

[Stew]

I cleared the cache on my phone, and used my wife’s phone as well. Her phone had never been to my staging site before, and it also experienced the issue. This is on the Safari browser on iPhone.

[Fernando]

I see. What specific iPhone and iPhone version are you using?

[Stew]

13 pro iOS version 16.0.2

[Fernando]

I see. That’s odd, I tried on an iPhone 14 v16.0 and iPhone 13 Pro v15.6, and didn’t experience the issue from these two.

Will you be able to test using a different network(Internet service Provider) to assure it’s not a modem or network caching issue?

[Stew]

Force closed safari, cleared the cache, turned wifi off so I would be on cell, opened in private browser and it still did it. It also does it in standard mode.

[David]

Hi there,

in the CSS – change this:

#mobile-header {
    position: fixed;
    bottom: 0;
}

to:

#mobile-header {
    position: fixed;
    bottom: 0;
    top: unset !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stew]

That updated CSS has fixed the issue. Thank you!

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts