Sticky Nav Menu on Mobile Not working properly

Dear Support,

Im currently having a sticky Nav Menu for mobile on my site.
It works great on safari and chrome for mobile.

When i scroll down the menu bar on top stays fixed to the top.

But when I open my site from a link on Facebook and try to scroll down, the sticky menu bar goes half above the screen and it looks horrible.

Similarly, on Firefox for mobile, while scrolling a page the menu bar disappears but when the scrolling is stopped it appears again. Its such a weird behaviour.

Here’s a sample link from my site:
http://smokingcessationformula.com/cbq-method-quit-smoking-cognitive-behavioural-quitting/

Also, below is the code i currently have that is responsible for making the mobile menu sticky. I believe this need to be fixed so that all browsers will work properly.

Thanks in Advance.
Regards

/*mobile sticky menu bar */
@media (max-width: 979px) {

.x-navbar.x-navbar-fixed-top {
position: fixed;
z-index: 2000;
top: 0;
width: 100%;
}

}

.touchevents .x-navbar {
overflow:hidden;
-webkit-overflow-scrolling:touch;
}

@media (max-width: 979px) {
body .x-navbar-wrap {
min-height: 68px;
}
}
@media (max-width: 979px) {

.x-navbar {
position: fixed;
z-index: 2000;
top: 0;
width: 100%;
opacity: .98;
}
.masthead {
min-height: 68px;
}
}

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

Hi There,

I cant replicate the issue on my phone, on Android Browser, Firefox for Android and Chrome for Android.

Would you mind to test with a different phone?

Let us know how it goes.

Thank you

Hi @joao,

I do not actually have an adroid device with me, but i tried this on 3 different ios devices. iphone 6, iphone 7 Plus and iPad.
They all caused the same issue.

Please try from an iphone if possible and i will test it from an android when i get the chance.

Looking forward for a solution.
Thanks

Hi there,

You mean Facebook browser? Because I checked it on my iPad and iPhone with the standard browsers and it works okay. Unfortunately, Facebook browser is like a sandbox one, something we can’t debug or troubleshoot. I’m not even sure how to manually trigger/open it. Each browser has their own set of standards, but looks like Facebook browsers are lacking some standard (eg. similar to IE). It’s just like a lite browser for reading purposes, but, I already forwarded the same issue in our developer, maybe it’s something they can check.

Thanks!

Hi @iam
Thanks for your reply.
Anytime you click on any link inside the facebook app, it will take you to the facebook browser.
We run facebook ad campaigns all the time, thats 93% of our traffic to our site. And everyone who clicks our ads is opening our site through the facebook browser. (ios users)

So this issue is very very common with our visitors.

In order to replicate that, try to post any of our links on your facebook profile (you can post it as ONLY ME so no one would see it)

Then click on it and you will see how the menu bar is showing in the facebook browser.

Please let me know how to fix such an issue.

Thanks in advance!

Hi there,

I could do that, the problem is I can’t debug it (open or trigger the debugger). It’s not the same as other mobile browsers where the debugging option is available.

Please check this https://stackoverflow.com/questions/27199489/how-to-debug-on-facebook-internal-browser-mobile

Some tools are available for iOS (not sure for Android),

And one thing is sure, you’ll have to do mobile native coding just to create your own way of debugging since the Facebook browser doesn’t have it.

It’s like a closed door and we need to find the other way in, what I could do for now is forward this to our developer.

Thanks!

Thanks a lot for forwarding this to the developers @iam
Looking forward to hearing form you soon.

Best!

You’re welcome.

Hi again,

Any updates on this please ?

I think i found some similar issue on stackoverflow.

See, the main issue is that my site isnt considering th upper navigation bar of facebooks in app browser, therefore my site’s menu bar is going behind it.

Please let me know if this mught help to alter my code to make this work.
Thanks

Sorry but we don’t have news for this yet. Please stay tuned.

Thanks for your reply @xian

Alternatively what I think is best to do is to have a different behaviour for the sticky menu bar only when the browser is facebook.

Is this possible ?

If yes, can this behaviour be similar to this site: http://socialtriggers.com when its opened from a facebook browser ?

Thanks in advance

Hi There,

Unfortunately that is not possible.

Thanks for understanding.

What is not possible ? To create specific CSS behaviour based on browser ? Or to make the menu bar behave like the website I mentioned earlier ?

Thanks

Hi there,

Using CSS should be easier, but the problem is to detect which browser. I’m not sure if both are doable when it comes to Facebook browser.

Thanks!

Okay Thanks.
I guess we’ll have to wait for the devs to look into this for facebook in app browser.

This might help:

Thanks again.
I’ll keep an eye on this.

Thanks for sharing!

Hi @Rad,
Any updated on this ?
Thanks :slight_smile:

No news yet. Please note that new features, enhancements and bug fixes could not be added instantly. If you have a tight deadline for your project, please consider hiring a third party developer.

Thank you for understanding.

Hi @christian_y
Just following up on this. Any updates ?