Menu icon Foundation
3 level dropdown links not working on mobile devices

Hi everyone,

I'm a newbie to Foundation and am happily starting building a topbar for my site.

However I'm having some issues with the third level dropdown links on mobile devices. They simply don't show! On desktop and tablet they seem fine. But on mobile the area, were they are supposed to be, is blank. (The bagground color shows, but the links don't. And nothing is clickable. )

menu structure:
...
Om
Illustration og maleri
----> Boligtilbehør (2nd level is ok!)
Udstillinger
Produkter
----> Boligtilbehør
----> Accessories
----> ----> Totebags (3nd level leaves no links but merely blank space!)
...

Also the togglebar nav gets double height on mobile-screen. On-click it is the correct height. (?!)

I use the css foundation-5.5.1 version and am not familiar with Sass.
I've searched several similar topics regarding the topbar and dropdown. But nothing seems to resolve the third level issue. Except maybe from something about the mobile breakpoints... I am wondering if this is solution, but can't get around it.

Any help is most appreciated. Cheers!

http://camcreative.dk/index_foundation_menu.html

dropdowntop-bar3 levelhas-dropdownmobiletoggle-topbarnav-bar

Hi everyone,

I'm a newbie to Foundation and am happily starting building a topbar for my site.

However I'm having some issues with the third level dropdown links on mobile devices. They simply don't show! On desktop and tablet they seem fine. But on mobile the area, were they are supposed to be, is blank. (The bagground color shows, but the links don't. And nothing is clickable. )

menu structure:
...
Om
Illustration og maleri
----> Boligtilbehør (2nd level is ok!)
Udstillinger
Produkter
----> Boligtilbehør
----> Accessories
----> ----> Totebags (3nd level leaves no links but merely blank space!)
...

Also the togglebar nav gets double height on mobile-screen. On-click it is the correct height. (?!)

I use the css foundation-5.5.1 version and am not familiar with Sass.
I've searched several similar topics regarding the topbar and dropdown. But nothing seems to resolve the third level issue. Except maybe from something about the mobile breakpoints... I am wondering if this is solution, but can't get around it.

Any help is most appreciated. Cheers!

http://camcreative.dk/index_foundation_menu.html

Rafi Benkual over 4 years ago

What device are you testing on? It looks ok in Chrome from what I can tell.

/CAM over 4 years ago

Hi Rafi,

Thanx for asking that question. Seems like I needed a browser update on my Samsung galaxy!
In Chrome, like you say, it is working perfectly.

However, not everybody is aware of having an old browser on their cell, – are they? Can I make some code to make the third levels show on older devices?

Rafi Benkual over 4 years ago

What Model Galaxy are we talking about? Testing on a Galaxy S5 works fine. Can you be very specific?

/CAM over 4 years ago

This was a S3 Rafi. Not the newest model, I know!