I added nested menus to my project using Foundation 6 and the instructions outlined by Coffee Cup for CREATE A NESTED MENU FROM SCRATCH.

When I open in a browser for the first time, the menus are shown with dropdown carots and open properly, but the hamburger icon does not appear or work on small screens.

When I open the browser again, the hamburger icon displays correctly, but the menus are shown vertically and will not open or close.

Any help on why this may occur?

(I tried to attach my project to this request, but the post wouldn't download. i'll try again posting it later)

To attach a project (.rsd) file it is usually best to zip it up first.

For those able to help on Foundation matters, I believe the article referred to is here.

Frank

The project can be downloaded at www.shephillsclermont.org/lholihan.zip

The menu was created from the instructions Frank referenced, but doesn't work.

Thanks for any help.

First thing I noticed is that you have misspelled a class name. Correct 'data-accordian' to 'data-accordion'.
Second, there is a lot of css grid bits inside the menu. I think keeping that flex would be better. Mind you, I'm no css grid expert, but I know that the tutorial you have been following doesn't have any css grid.
Haven't got any further yet...

In some of the attributes you also need to correct the spelling of 'accordion'. And get rid of the css grid, use flex instead. Then you should be good to go.

Thanks, your suggestions worked. I think using flex instead of grid was the real change maker ... that and my spelling.

Larry,

You aren't the only one that thought accordion was spelled 'accordian'. Don't ask me why I knew that.