Responsive top menu

[errlog]

Hi,

when i scroll the page, the top menu won’t follow. I can get down the page and if i wan’t to see the top menu, i have to go back up again.

The top menu works on a normal window when i scroll, but in responsive it doesn’t follow and stay at the top of the page to make the navigation easier, even in the demo.

Test on a Samsung Galaxy S2 default internet browser.

Do you have any idea why?

Thanks

[livemesh]

The sticky menu is intentionally disabled in smartphones lesser than seven inch due to space constraints. In iPhone, you can touch the top bar of the browser to instantly navigate to the top and then navigate to the desired location by invoking the right menu. This was the reason why both sticky menu and back to top button are disabled for phones.

In Android, I am not sure there is something like this available natively. If you need the sticky menu to be open for mobile browsers or want to at least have the back to top button, pls have a look at the js/main.js file at line number 473 (for back to top) and line number 82 for sticky menu (modify width conditional to something like 200 instead of 768). You will also need to remove the following CSS from css/responsive.css file at line number 93 –

#header.sticky { display: none !important; }

[errlog]

Thanks! The back to top will make the job 😉

What if i want that the ‘list’ icon stay on top when i’m on a mobile? So I’ll just have to click on it to see the menu expand?

If i modify the main.js at line 82 the whole menu will show (like on a normal screen) and I would like to have the expandable menu when i scroll down the page.

I don’t know if it’s possible to do that.

Thanks again!

[livemesh]

Sorry, expandable menu in the sticky menu is not practical since clicking on the mobile menu icon will only expand the menu in the header while you would have navigated far down below. Users will be confused if we jump suddenly to the header upon clicking the expand button.

Back to the top is a better solution from usability perspective. If you need sticky menu, my advice would be remove the expand button from the sticky menu for mobile, probably remove the logo also to address space constraints and just have a single line of navigation for mobile. Thanks

[Author]

Posts