tobzzz tobzzz - 1 year ago 128
CSS Question

How to adapt bootstrap navbar drop-down to be inline

I've been asked to have inline sub-menu items for a site I'm making using Bootstrap.

The default with Bootstrap for drop-down is a nice 'downdown-toggle' class where items are stacked and only width of items with some padding.

How can I adapt that class for the sub-menu background to be 100% screen width, then sub-menu items in container and items (li's) to be inline not stacked? See mock-up image of what I want to achieve.

Note that unlike the current sub-menu, this would need to push all content below down rather than hover over it.

enter image description here

EDIT after mk14 gave really good code below. This is what I get (see image below). I just need items to be in a container (i've shown in yellow) and to push the content of the page down and back up as menu shows and hides. To reiterate, I want the grey background to be 100% width of screen as I said, but items in the container.

enter image description here

Answer Source

Okay, I'm expanding on the first answer based on the comments you made under it and adding more specificity and the media query.


CSS (add your breakpoint when the larger viewport menu kicks in )

@media (min-width:768px) { 

  body { padding-top: 60px } /* height of the menu collapsed */

  .nav-bg {
        height: 0px;
        width: 100%;
        position: absolute;
        top: 50px;
        background: #e7e7e7;
        transition: all .5s ease-in-out;

    .menu-open .nav-bg { height: 50px } /* change to your height of the child menu */

    .menu-open #page {
        transition: all .2s ease-in-out;

    .navbar-nav.nav > li { position: static }

    .navbar-nav.nav .dropdown-menu {
        left: 0 !important;
        right: 0 !important;
        box-shadow: none;
        border: none;
        margin: 0 auto;
        max-width: 1170px;
        background: transparent;
        padding: 0;

    .navbar-nav.nav .dropdown-menu > li { float: left }

    .navbar-nav.nav .dropdown-menu > li > a {
        width: auto !important;
        background: transparent;
        line-height: 49px;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;


$('.navbar').append('<span class="nav-bg"></span>');

$('.dropdown-toggle').click(function() {

    if (!$(this).parent().hasClass('open')) {


    } else {




$(document).on('click touchstart', function (a) {
        if ($($('.navbar-nav')) == -1) {


  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <a class="navbar-brand" href="#">Project name</a>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Dropdown 2 Child 1</a></li>
                <li><a href="#">Dropdown 2 Child 2</a></li>
                <li><a href="#">Dropdown 2 Child 3</a></li>
                <li><a href="#">Dropdown 2 Child 4</a></li>
        </div><!--/.nav-collapse -->

<div class="container" id="page">
  Me finks this is a page.