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?

Answer 1

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>

Answer 2

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>

Answer 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>