Page is not scrolling vertically in mobile devices after click on sub menu one pager links

#1

Page is not scrolling vertically in mobile devices or when we resize the browser when we a user click on about menu sub menu’s for example Roadmap , Team and so on …

here is the link http://dev.cloudtech.com.cy/monetum/

Thank You

#2

Hi sevan, welcome to the forums!

It does scroll down to the linked page fragment in every width I can resize my browsers to.
Also in responsive and mobile mode all menu links scroll to the linked page fragment.

What browser(s) do you use that doesn’t scroll from the hamburger menu?

[Off topic]
IMHO:
The desktop navbar’s submenus are Javascript dependent?
The very wide (1152 px) breaking point for the mobile menu?
The hamburger menu is Javascript dependent?

#3

[Off Topic]

Sorry, I didn’t notice the nav links at the bottom of each page. :blush:

[/Off Topic]

#4

The page scrolls to the destination on my iphone5 ok.

There is a glitch on the overlay menu itself where ‘sometimes’ it scrolls the content underneath when sliding with touch rather than scrolling the actual menu items.

I’ve had a long look at it and can’t pinpoint an obvious solution although ios is notoriously buggy in this area especially when transforms are thrown into the argument as they provide a new stacking context for fixed elements.

The way the site is ‘sandboxed’ in an overflow div rather than using the body element doesn’t help as that may induce buggy behaviour in extreme cases

I also not that when the menu is open you are adding a class of overflow-hidden to the body to stop the body scrolling but you are over-riding it an a subsequent css rule (monetum 235).

body.overflow-hidden{
overflow:scroll;
}

The rule in style.css says overlow:hidden.

However I’m not sure that is the cause as there are too many things going on to isolate. The menu does scroll eventually but ocassionally sticks and I have seen this behaviour in a lot of mobile sites. Sometimes its caused by the page bounce where the content underneath can be seen and once touched seems to scroll. I think there are also dead spaces at the right side of the page where your fixed div seems to get stuck (possibly dues to the sandbox).

To debug fully you would need to isolate just the menu code in a stand alone demo and test that it works without issue and then gradually add stuff back in. I realise this isn’t always possible on a finished article and especially on a site that has complexities like yours.

1 Like
#5

I fixed the issue by adding

body.overflow-hidden {
overflow: scroll;
}

Thank You

1 Like
closed #6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.