18

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?

3
  • 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, 2016 at 1: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, 2016 at 1:51
  • This is much easier in Bootstrap 4: stackoverflow.com/a/42635243/171456 Apr 15, 2017 at 10:08

3 Answers 3

14

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>

1
  • How to achieve same result with navbar-fixed-top?? Mar 23, 2017 at 12:22
6

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>

3
  • 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, 2016 at 3: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, 2016 at 5: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. Dec 23, 2021 at 18:43
3

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>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.