Bootstrap Nav with 2 rows of links on desktop

Question

I need to create a responsive nav with 2 rows of links. I would prefer to use bootstrap since it's already being used on the site. Any help to point me in the right direction would be greatly appreciated!

What I need it to look like

Answer 1

After searching around for several hours, I was able to find a few different sources that ended up helping me figure it out.

Here's what my code ended up looking like. It's not perfect yet, but almost there.

Thanks everyone!

#nav-div { /*This is the div that wraps the entire logo and nav content*/
	width:100%;
	position: fixed;
	top:0;
	left:0;
	z-index: 10;
	margin: 0;
	padding:0;
}

#nav-wrapper { /*This is the div that sizes the nav down to a col-md-9*/
	padding:0;
	margin:0;
}

#nav-container{
	padding:0px;
}

#nav-top-row {
	background-color: #6D6E70;
	color: #fff;
	padding: 0px 10px;
}

#nav-top-row a {
	color:#fff;
	padding-top:5px;
	padding-bottom:5px;
	font-size: 12px;
}

#nav-top-row a:hover {
	background-color: #CCCCCC;
}

#nav-bottom-row {
	background-color: #009578;
	padding:0px 10px;

}

#nav-bottom-row a {
	color:#fff;
}

#nav-bottom-row .dropdown-menu li {
	background-color:#00806B;
}

#nav-bottom-row .dropdown-menu li a:hover {
	background-color:#009578;
}

#nav-bottom-row li.dropdown.open a.dropdown-toggle {
	background-color:#00806B;
}

#logo {
	margin-top:35px;
	width:90%;
	max-width:250px;
	margin-right:auto;
	margin-left:auto;
}

#logo-div {
	padding:0px;
	background:rgba(255,255,255,.8);
}

.push-down { /*invisible div with no content that pushes down the main body content*/
	margin-top:75px;
}

<div id="nav-div"class="">
    <div id="logo-div" class="col-md-3">
      <a href="#">
      <img src="HM-Logo_Grn.png" id="logo" class="img img-responsive">
      </a>
    </div>
    <div id="nav-wrapper" class="col-md-9">
      <!-- Fixed navbar -->
      <nav id="full-nav" class="navbar navbar-default">
        <div id="nav-container" class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <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="#">Project name</a> -->
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <div id="nav-top-row" class="row">
              <ul class="nav navbar-nav navbar-right ">
                <li><a href="#">SERVICES</a></li>
                <li><a href="#about">ACCESS REPORT</a></li>
                <li><a href="#contact">REQUEST INSPECTION</a></li>
              </ul>
            </div>
            
            <div id="nav-bottom-row" class="row">
              <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">COMPANY <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">PRESS RELEASES</a></li>
                    <li><a href="#">NEWSROOM</a></li>
                    <li><a href="#">AWARDS</a></li>
                    <li><a href="#">MEDIA ASSETS</a></li>
                  </ul>
                </li>
                <li><a href="#">RESOURCES</a></li>
                <li><a href="#">BUYERS</a></li>
                <li><a href="#">SELLERS</a></li>
                <li><a href="#">AGENTS</a></li>

              </ul>
            </div>
            
          </div><!--/.nav-collapse -->
        </div>
      </nav>
    </div>
  </div>


    <div class="push-down"></div>

Answer 2

You need to spend some time looking at Bootstrap Navbar section also spend some time hacking around the examples and you will soon get the hang.

If you want a BIG, deep menu have a look at Yamm (yet another mega dropdown menu) or something similar. There are lots out there just search for bootstrap menus or dropdown menus... But the basic nav is very flexible.

Answer 3

Just create something like this:

<nav>
  <div class="container">
    <div class="row">
      <div class="col-md-*">
      </div>
    </div>
    <div class="row">
      <div class="col-md-*">
      </div>
    </div>
  </div>
</nav>

Also just take a look at bootstrap's docs. Here is the link to Bootstrap's site