Navigation help - Post ID 274969

User 2601283 Photo


Registered User
219 posts

I got the nested navigation menu to look correct for desktop, but not sure what I missed for smaller levels. Have only worked below the lowest breakpoint.

Ilala.org/index2.html
User 2601283 Photo


Registered User
219 posts

The pop-outs for the submenus are not working on the smaller screens.
Attachments:
User 244626 Photo


Registered User
811 posts

https://codepen.io/k33k00/pen/BjBZjE?editors=1000

I would try to do this html in foundation as it seems like what you are trying to do.

Bootstrap 5 CSS Grid.
User 2601283 Photo


Registered User
219 posts

Thanks. Lost a step somewhere in the nested tutorial they gave
User 244626 Photo


Registered User
811 posts

Here is the template project I just made up which you can look at and see if it will work.
Attachments:
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

I forgot that I had disabled the hamburger during testing so if you would like that activated just add the id="example-menu" to the topbar.

You need to also change attribute data-hide-for="small" back to medium on the title bar.

Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Here is a updated version with the hamburger active and the FOUC "flash of unstyled content" addressed.
Attachments:
Bootstrap 5 CSS Grid.
User 2601283 Photo


Registered User
219 posts

Thank you. With your file and some trial and error I figured out what was wrong
User 244626 Photo


Registered User
811 posts

You are welcome Angie. I am still learning the foundation menu structure too....
Bootstrap 5 CSS Grid.

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.