Bootstrap navbar with two rows

Question

I am wanting to have a Bootstrap 3 navbar that has two rows with navigation elements, and with navbar-brand spanning both rows. On SM+ screen sizes both rows are visible. On XS screen sizes the second row collapses and shows the icon-bar to open.

SM+

+-------------------------------------------------------------------------------+
|               |                                             Nav-A-1  Nav-A-2  |
|  SITE LOGO    |---------------------------------------------------------------+
|               |  Nav-B-1  Nav-B-2 Nav-B-3 Nav-B-4                 Form-Right  |
+-------------------------------------------------------------------------------+

XS

+-------------------------------------------------------------------------------+
|               |                                             Nav-A-1  Nav-A-2  |
|  SITE LOGO    |---------------------------------------------------------------+
|               |  Nav-Collapsed                                     Hamburger  |
+-------------------------------------------------------------------------------+

How could this be done with the navbar?

I am a little confused what you are asking for specifically, what are the Nav A, B elements supposed to represent? What code have you tried so far? — crazymatt, Jun 30 '16 at 01:13
Updated question slightly to reflect that there is two rows of navigation items. What have I tried? Started with standard Bootstrap navbar example code, tried adding in rows and columns, but struggled with having two rows and collapse only on one row. — johna, Jun 30 '16 at 01:51
This is much easier in Bootstrap 4: http://stackoverflow.com/a/42635243/171456 — Carol Skelly, Apr 15 '17 at 10:08

vanburen · Answer 1 · 2016-06-30T03:33:26.340

You can essentially use two navbars and then use position: absolute for your image. You could potentially use the grid but your collapse menu won't be full-width on mobile most likely then.

Working Example:

.navbar-inverse.nav-upper {
  height: 50px;
}
.navbar-inverse.nav-upper ul {
  float: right;
  display: table;
}
.navbar-inverse.nav-upper .navbar-upper > li {
  display: table-cell;
  font-size: 14px;
}
.navbar-inverse.nav-upper .navbar-upper > li > a {
  color: #777;
}
@media (min-width: 768px) {
  .navbar.navbar-lower .navbar-nav {
    margin-left: 100px;
  }
}
.navbar-logo {
  background-image: url('https://lh3.googleusercontent.com/-tw5LsU4Fg28/Umo6BBcoCnI/AAAAAAAAmjE/1iqULsem06E/w896-h896/heisencat.png');
  width: 90px;
  height: 90px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 5px;
  left: 15px;
  z-index: 1051;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a class="navbar-logo" href="#"></a>

<nav class="navbar-inverse nav-upper">
  <div class="container-fluid">
    <ul class="nav navbar-upper">
      <li><a href="#">NAV-A-1</a>
      </li>
      <li><a href="#">NAV-A-2</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-inverse navbar-static-top navbar-lower">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">NAV-B-1</a>
        </li>
        <li><a href="#">NAV-B-2</a>
        </li>
        <li><a href="#">NAV-B-3</a>
        </li>
        <li><a href="#">NAV-B-4</a>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-default">Submit</button>
            </span>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

How to achieve same result with navbar-fixed-top?? – Ganesh Parikh Mar 23 '17 at 12:22 — Ganesh Parikh, Mar 23 '17 at 12:22

score 6 · Answer 2 · answered Jun 30 '16 at 02:52

Try this. On SM+ screen sizes both rows are visible. On XS screen sizes the second row collapses and shows the icon-bar to open at right side.

.navbar-default.nav-top ul {
  display: inline-block;
  float: right;
}
.navbar-default ul.navbar-top li {
  float: left;
  font-size: 11px;
}
.navbar-brand {
  margin: -40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar-default nav-top">
  <div class="container-fluid">
    <ul class="nav navbar-top" >
      <li><a href="#">Nav-A-1</a>

      </li>
      <li><a href="#">Nav-A-2</a>

      </li>
      <li><a href="#">.....</a>

      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/100x50/f00/f00">
      </a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav " style="margin-left:150px;">
        <li class="active"><a href="#">Nav-B-1<span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Nav-B-2</a>

        </li>
        <li><a href="#">Nav-B-3</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

Not sure why someone gave you a -1, but I appreciate your answer and it is close to what I need. I just need to figure out why the collapse menu is not aligned to the left. — johna, Jun 30 '16 at 03:19
In bootstrap the navbar-toggle class is aligned to right by default. If want to left align we rewrite the css — Ram_UI, Jun 30 '16 at 05:29
How did the lower navbar turn out to be thicker than the top? I've tried decreasing the `font-size` and deleting the navbar toggle button, but the lower navbar remains thicker than the top. — Levi Uzodike, Dec 23 '21 at 18:43

score 3 · Answer 3 · edited Jan 12 '22 at 16:55

Have look in below code snippet

<html>
<head>
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <style type="text/css">
    .navbar.navbar-default {
      margin-bottom: 0px;
    }
    
    @media (max-width:767px) {
      .navbar-toggle.pull-left {
        margin-left: 10px;
      }
    }
    
    .menu .col-sm-2,
    .menu .col-xs-2 {
      padding-right: 0px !important;
    }
    
    .menu .col-sm-10,
    .menu .col-xs-10 {
      padding-left: 0px !important;
    }
    
    .row .well {
      height: 105px;
      margin: 0;
      text-align: center;
    }
    
    .top_link {
      padding: 15px;
    }
  </style>
</head>
<body>
  <div class="row menu">
    <div class="col-sm-2 col-xs-2">
      <div class="well">
        SITE LOGO
      </div>

    </div>
    <div class="col-sm-10 col-xs-10">
      <div class="row">
        <div class="col-sm-12 col-xs-12">
          <a href="#" class="pull-right top_link">Nav-A-1</a>
          <a href="#" class="pull-right top_link">Nav-A-2</a>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-xs-12">
          <nav class="navbar navbar-default">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header ">
                <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                          </button>
              </div>
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Nav-B-1<span class="sr-only">(current)</span></a></li>
                  <li><a href="#">Nav-B-2</a></li>
                  <li><a href="#">Nav-B-3</a></li>
                  <li><a href="#">Nav-B-4</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#">Form-Right</a></li>
                </ul>
              </div>
              <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
          </nav>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Bootstrap navbar with two rows

3 Answers3

Linked