Mobile menu scroll issue

User 2903050 Photo


Registered User
260 posts

Hi, I have positioned my .section-layout .navigation in sticky 0px so that the navigation menu in mobile stays fixed to the top. All works well apart from that when looking at the last menu in mobile "support" you press it but have to scroll the complete web page before the links can be seen as the menu stays still and doesnt scroll.
Is there a way to get the menu to scroll when not in view.
Higher break points are fine as screens are way bigger.
I have tried so many things.
Regards
Attachments:
User 244626 Photo


Registered User
811 posts

Not sure this would help but you may want to add a custom data attribute "data-multi-open" value "false" to your main ul container (List Container). It will automatically close any opened drop-down when another drop-down is selected.

(Seems to be missing from the attribute selection).

I personally do not like the fixed version of the foundation mobile menu. My view has always been to make the user scroll down and then back up to get to the menu icon. It increases the view time of the user (forces them to look at everything) and it keeps them from leaving midpoint to another page.

I found a similar solution for someone else but it was on a accordion.

https://www.coffeecup.com/forums/respon … on-mobile/
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Phillip, I just sent you a email with the revised project. It has the data-multi-open added to the ul container. It does appear to change the focus also so this should work.

Let me know if you did not receive it.

Cheers !
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

User 2903050 Photo


Registered User
260 posts

Hi, seemed to have sorted the scrolling issue in mobile by adding a height of 500px.
But Twinstream, your script above is not working:(
User 2903050 Photo


Registered User
260 posts

Hi, seemed to have sorted the scrolling issue in mobile by adding a height of 500px.
But Twinstream, your script above is not working:(
User 244626 Photo


Registered User
811 posts

Phillip Dias wrote:
Hi, seemed to have sorted the scrolling issue in mobile by adding a height of 500px.
But Twinstream, your script above is not working:(


Hello,

Here is the revised project file with the added custom data-attribute to the ul that will close one dropdown when opening another.

I apologize as I had sent the project to your email on your webpage but had accidentally typed it wrong so it came back undelivered.

The script I referenced for the accordion scroll issue another user was having only works for the accordion. It would have to be modified to work with the dropdown. In the foundation doucuments, usually at the very bottom of the components they will give the "Events" that fire when a action happens on the component. You can use javascript to look or "listen" for these events and then perform any function you would like to add to the Event. The accordion script could be converted to a dropdown script by changing the class references and listeners events.

https://foundation.zurb.com/sites/docs/dropdown.html
Attachments:
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

How did you add the data multi open to the SD3 when its not in the dropdown list? Would love to know?
User 2903050 Photo


Registered User
260 posts

Don't worry Twinstream. I've worked it out. Thank you, you are a genius:):):)
User 2903050 Photo


Registered User
260 posts

Latest version of my layout sections with grid. Thank you so much Twinstream for your input with the menu. I think its all working now. The "data-multi-open" is the icing on the cake.
Regards

http://phildias.com/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.