Solved

Bootstrap Nested Inline List

Posted on 2016-07-25
2
107 Views
Last Modified: 2016-07-29
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
Comment
Question by:Bob Schneider
2 Comments
 
LVL 25

Accepted Solution

by:
lenamtl earned 500 total points
ID: 41727716
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
 

Author Closing Comment

by:Bob Schneider
ID: 41734811
Awesome!  Thank you!!!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adding bootstrap to only Content page and NOT master page 1 65
Media Queries  not Firing 6 26
need help with share buttons 11 65
Flex Messes  With Horizontal Positioning 2 21
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question