• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 185
  • Last Modified:

Bootstrap Nested Inline List

I have a page that already has a header with a nested list/nav bar similar to www.gopherstateevents.com.  Can I add another nested list below that? If so, will it collapse on a smaller (mobile) screen?
0
Bob Schneider
Asked:
Bob Schneider
1 Solution
 
lenamtlCommented:
Hi,

if you are using the default Bootstrap navbar menu it is very limited, even in the next v4, so you need custom code for extra levels...

Honestly in many case big menu are not very userfriendly on small device.
Keep menu item name short, try to regroup pages to have less main menu as possible.
I prefer to use one extra level, more than that it is starting complicate to navigate on small devices.
You can add arrow icon to clearly show sublevel.

You can use this small snippet to get several layer see menu1 that have 3 levels
it is done by using a submenu class
http://bootsnipp.com/snippets/featured/multi-level-navbar-menu

or you can use a third party script
I use this one often because it is flexible about menu content (photo, video, and it's allow grid).
I added icons and color for the sublevels for small device as it it not very clear without it.
http://faysalhaque.github.io/redq-megamenu/
0
 
Bob SchneiderCo-OwnerAuthor Commented:
Awesome!  Thank you!!!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now