[Mobile only issue] Left navigation bar links do not expand.

Mar 15, 2016 at 7:20 AM
Hello,
I am having a issue with mobile users, the top navigation works perfectly when clicking on the arrows to open sub links. But the same function does not apply for side navigation (it works in regular view). I searched all the discussions here and found nothing that helps and i am struggeling to figure it out myself. If anyone had the same issue and came up with a solution i would be glad to get some help.
Apr 11, 2016 at 6:17 AM
Got the top bar navigation issue figured out. It was caused because i dident add the full domain path, using a shortened one caused issues over vpn.

The left navigation is still giving me a issue, is there no way to change the javascript so that on mobile devices first click opens the dropdowns?
Coordinator
Apr 12, 2016 at 5:00 AM
Hi,

The issue you are running into is that the "header" items in the current navigation are links in your case, thus when you click on them, the links open a new page rather than attempt to open the sub menu. On a desktop, with a mouse, you simply hover over the header "links" and that allows the sub menu to appear.

You will need to include JavaScript that overrides the click behavior of the header link. Or my suggestion would be to add a little JS that will add some sort of arrow to each header link in the current nav. This arrow may be a floating right div or span, or even an absolutely positioned div or span. Bind a click event to this arrow that will cause the sub menu to toggle. Using CSS and media queries you could choose when and where you want these "arrows" to appear.

Eric
Apr 28, 2016 at 8:19 AM
Hello,
Thank you for the response, actualy by default sharepoint adds the button you were suggesting. It works for top link bar but for some reason it does not work for side navigation. I attached a button to show you what i mean.
Image Link: http://postimg.org/image/3lccyv50x/ if the insert image does not work.

The thing is i went over the foundation js files, and all functions that apply to top link bar seem to be the same for side bar, but for some reason it does not work for side navigation.
May 26, 2016 at 12:41 PM
Hello again,
Had more time to work on it, got the js working and found out the issue i actualy had was because i was using fly out menu.
It worked fine for larger screens but when the smallest screen size was active the left navigation had a restricted size, as in anything that went out of borders was cut off like this (i moved the popout to left so you could see it was cut of from the exact spot the left navigation ended).
Image

When on bigger screens the left navigation works like this:
Image

I have no idea what i should change so it would work as i want
May 27, 2016 at 9:11 AM
Figured it out, there was in css overflow:hidden, added to the hover effect overflow:visible and everything is working fine now.