I’m trying to code a 2-level navigation menu using the Bootstrap standard nav. My requirements are that the background colors of both menus appear to stretch full width of the screen, but the menu items themselves need to be centered in the page (so left-aligned with the logo and dummy content shown in the code that is within the 12 column grid). Also, I want the dropmenu to not be on top of the other layers (absolute positioned), but instead to push down the other content below it when a dropdown menu is hovered or clicked.
The other thing to note is that the top-level menu item and the submenu items are links (which I’ve used .disabled to do). Also, when a category like “services” is clicked, I want the submenu to stay visible. So, I’ve used .active ul#options for that one.
Also, I’ve added the CSS for Yamm3! thinking it would help. If it is not needed, please let me know so I can remove.
This is my first time using the Bootstrap framework. I’ve tried several things, and where I’m at is perhaps close, but doesn’t meet the two requirements above.
Here is a code sample: http://cdpn.io/cLJzC Hopefully this is enough to allow someone to help me. I’m driving myself crazy on this one!
