The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Twitter Bootstrap 2-Level Horizontal Menu – Full Width

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #162198

    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: Hopefully this is enough to allow someone to help me. I’m driving myself crazy on this one!


    I appreciate the comment, but those small changes don’t fix my issue completely. By making it .container rather than .container-fluid, now the drop down menu is constrained to the 12-column grid too. I want it’s background color to stretch full screen, not be contained.

    In addition, if I make the absolute a relative, now the submenu is only the width of the menu above it…again not full width.

    I’ve updated the code as you suggested, so that you can see the subsequent problems.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.