Problem with sticky menu on mobile phones

iorbita

Hello,
if you can help me solve this problem i would be grateful because yesterday I spent a lot of time trying to solve it but failed.

The problem is the sticky menu on forum page (Menu ID 269). It doesn’t stay fixed when it is displayed on mobile phones, on tablets there is no problem it stays fixed, so the problem is only on mobile phones.

If I take a closer look at the DOM I noticed that “fixed” class is not added to html tag as well as “zen-nav-fixed” class which is not added to “#logowrap" tag. Also, I noticed that “#sticky-fill” tag keeps “hidden” class.

I tried to create a new template style for these same pages, but the problem remains.
Same behavior if I assign these pages to another template style where sticky menu works. I expected that the browser console gives me a javascript error, but no error is displayed ...

So apparently there is a problem with “Enable Stickynav” option which doesn’t seem to be applied for mobile phones even with the option enabled.

Here a short screencast to illustrate the problem: http://u.pc.cd/xKe7

Thanks,
Lorenzo

saguaros

Hi Lorenzo,

It seems that there is conflict with EasyDiscuss extension specific. I've reported to our development team for further checking on this.

Regards

iorbita

...thanks Saguaros, do you need also FTP access?

saguaros

iorbita You can share it so I will update when having solution from team.

iorbita

Hello Saguaros,
...any news about the issue with sticky menu?

Thanks,
Lorenzo

saguaros

Hi Lorenzo,

I'm checking with our developer on this, will keep you posted.

saguaros

Hi Lorenzo,

Our developer investigated further on this and found out that on this EasyDiscuss page, they utilize JS to render the special layout for mobile so it's not possible to add class for scroll behaviour.

Could you pls also contact support of StackIdeas for further checking on this?

iorbita

Hello Saguaros, here is the answer from Stackideas team:

From what I checked, that is the EasyDiscuss toolbar mmenu.js script that pushes the content into this div "mm-page mm-slideout" after the < body > tag.

May I know is it possible to adjust their Javascript to find the element if under this parent div (screenshot: https://take.ms/7jT6E )?

Because I did try to exclude some of the id or class element from the script, it seems like still can't make it work. (screenshot: https://take.ms/5qSfd ) All these div content is not under the "mm-page mm-slideout" div which injected from mmenu.js

noSelector:["#zen-wrap", ".zen-fixed", ".sb-slidebar"]

Or is there any important element that needs to exclude as well?

saguaros

iorbita

Our dev fixed the sticky issue, could you check again?

And are you or support guy from Stackideas is working on your site also? I see this error on your site now.

iorbita

Hello Saguaros and thank you for your support,
… no I don't think Stackideas devs are working on the website, they were waiting for a response from me.
On my side I don't see any error in the console, on which page do you get this error?

Could you tell me which file has been modified to fix this issue on my local website?

Thanks again...

saguaros

iorbita

We updated this file: templates/buildr/tpls/blocks/scripts.php

You can compare to see the difference.

P/s: in your video here: http://u.pc.cd/xKe7 which simulator / site you used so you can test the mobile / tablet side by side like that?

iorbita

Which simulator / site you used so you can test the mobile / tablet side by side like that?

I use Sizzy browser, it is a very complete browser
You can check its features here

saguaros

iorbita It looks good!

iorbita

... and I think the price is reasonable compared to other services you can find on the web ...