CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
HellaDev
HellaDev

Reputation: 408

Custom Two-row navbar in Bootstrap

I am trying to figure how how to accomplish a "conflict free" two row bootstrap-3 fixed-top navbar. I'm not sure if it actually needs to be two actual "navbars" by bootstrap definition. I am pretty good with coding, but don't have a complete understanding of the bootstrap framework yet (only a few months of focused work), so I am struggling here a bit.

Optimally, the top row would be a background color of #f2f2f2 with a brand/logo on the left, and alert icons on the right such as messages icon, notification icon, and profile icon. One thing I can't figure out is making these icons into drop-downs that don't get hidden by the below menu since I am using the bootstrap navbar classes for both menu rows.

Second row would have a background of #337ab7 with the "page title" headline on the left, and the drop down navigation items on the right. I have created a basic concept and attached it here for better visualization.

One of my biggest problems is I cannot figure out for the life of me how to properly change the drop down menu styling in Bootstrap to match my concept attached. I just want a basic flat looking drop down menu with no rounded corners and it seems like Googling for "how to customize bootstrap drop down menu" (in various forms of that) brings me to basic coloring but not complete overhauls.

My code is missing something where the default link colors are turning grey after being clicked, and overall acting odd. So I am hoping for a fresh start here. I would really appreciate some help here as I've been pulling my hair out for a few days trying to get this to happen. I can share code, but it's pretty ugly with my trial and errors. Thanks for any help you guys might be able to offer! bootstrap menu navigation

Upvotes: 0

Views: 1374

Answers (1)

vanburen
vanburen

Reputation: 21663

Here's an example of what you're trying to do. It does not accomplish everything you need but it will hopefully get you started.

The upper area (above the main nav) is just a div surrounded by the navbar class and a container, all standard Bootstrap Nav elements. It's mostly the CSS and knowing how the components can be used in my opinion.

Hopefully it helps.

body,
html {
  margin-top: 100px;
}
.navbar.navbar-custom {
  border-radius: 0px;
  border-left: transparent;
  background: #337ab7;
}
.navbar-custom .upper-nav {
  font-size: 20px;
  padding: 9px 20px;
  height: 50px;
  color: #337ab7;
  background-color: #f2f2f2;
}
.navbar-custom .upper-nav img {
  margin-top: 0px;
}
.navbar-custom .navbar-nav {
  margin-right: 30px;
}
.navbar-custom .nav-buttons {
  border-radius: 0px;
  background: none;
  border: none;
  color: #337ab7;
}
.btn-group .dropdown-menu > li > a {
  color: #fff;
}
.btn-group .dropdown-menu > li > a:hover {
  color: #444;
}
.navbar-custom .navbar-nav .dropdown-toggle {
  color: #fff;
}
.navbar-custom .navbar-nav > li > a {
  border-right: 1px solid #fff;
}
.navbar-custom .navbar-nav > li:first-child {
  border-left: 1px solid #fff;
}
.navbar-custom .navbar-header .navbar-brand {
  color: #fff;
}
.navbar-custom .dropdown-menu {
  background: #444;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a,
.navbar-custom .navbar-nav .open .dropdown-menu {
  color: #fff;
  border-bottom: 1px solid #fff;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu:hover {
  color: #444;
}
.wrapper {
  height: auto;
  background-color: #fff;
  margin-top: 0px;
  padding: 10px 20px;
}
.well {
  background-color: transparent;
  border: 3px solid #428bca;
  border-radius: 0px;
  text-align: center;
  font-size: 25px;
}
@media (max-width: 768px) {
  .navbar-custom .navbar-nav {
    margin-right: 0;
  }
  .navbar-custom .navbar-nav > li > a {
    color: #fff;
    border: none;
  }
  .navbar-custom .navbar-nav > li:first-child {
    border: none;
  }
}
<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" />
<div class="container-fluid">
  <nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
    <div class="upper-nav">
      <img src="http://placehold.it/150x30/444/fff?text=Logo">
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-user" </span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>

          </li>
        </ul>
      </div>
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-inbox" </span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>

          </li>
        </ul>
      </div>
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-off" </span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>

          </li>
        </ul>
      </div>
    </div>
    <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>

      </button><a class="navbar-brand" href="#">Page Title</a>

    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <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">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a>

            </li>
            <li><a href="#">Menun Item 2</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a>

            </li>
            <li><a href="#">Menun Item 2</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Menun Item 1</a>

            </li>
            <li><a href="#">Menun Item 2</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div class="wrapper">
  <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet
    facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur
    auctor id eu augue. Quisque ac elit congue, eleifend lectus a, tempor purus. In hac habitasse platea dictumst. Phasellus gravida massa arcu, sed sodales orci interdum vel. Curabitur ullamcorper leo mauris, ut interdum felis mollis id. Nunc porttitor
    egestas fringilla. Suspendisse volutpat sem quis sagittis fermentum. Fusce in laoreet elit. Etiam aliquam varius tincidunt.</p>
  <p>Nunc nisi justo, ultricies at lobortis et, fermentum at dolor. Nulla ultrices erat et erat egestas, in luctus justo pellentesque. In convallis purus ut pellentesque interdum. Curabitur in neque lectus. Nullam lobortis sodales elit, eu fringilla eros
    aliquet vel. Aliquam ac ipsum vel nunc vestibulum luctus nec sit amet mauris. Ut viverra ornare risus eu condimentum. Fusce sollicitudin volutpat nisl id dignissim. Sed malesuada dui at magna imperdiet, non accumsan odio imperdiet. Etiam tristique
    fermentum enim, vel dictum nulla fermentum ac. Etiam in bibendum nisi. Vestibulum neque lectus, vehicula eu sagittis ut, blandit sit amet mi.</p>
  <p>Maecenas lacinia vestibulum magna. Integer mollis varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet tortor turpis. Cras pharetra tellus elit, nec iaculis erat pellentesque
    sit amet. Nullam varius felis vel velit fermentum, nec facilisis erat accumsan. Nullam facilisis orci quam, eget semper turpis dictum id. Aenean magna ante, lobortis id sollicitudin quis, dapibus nec nisi. Maecenas aliquet posuere lectus, a ultricies
    arcu sodales sodales. Proin dignissim facilisis consectetur. Pellentesque suscipit quis dui eget malesuada. Quisque cursus neque a faucibus egestas. Phasellus sed nulla scelerisque diam adipiscing suscipit. Etiam sit amet enim ultricies risus consequat
    vestibulum eu sit amet urna.</p>
  <p>Vivamus hendrerit eget augue viverra auctor. Praesent mi leo, facilisis vel nisi vitae, sodales rhoncus augue. Maecenas purus nunc, commodo at massa eu, blandit aliquet enim. Proin sem neque, imperdiet non arcu eu, sagittis malesuada est. Fusce enim
    neque, facilisis et mattis ut, vulputate sed justo. Vivamus elementum elit nunc, eget tempor erat adipiscing nec. Praesent vestibulum dapibus vehicula. Pellentesque viverra faucibus leo in ornare. Sed sodales faucibus tincidunt. Vivamus dignissim
    tristique libero sit amet aliquet. Donec ut nunc dolor. Duis molestie tortor mi, id auctor nisi ullamcorper et. Proin eu ante cursus, varius felis id, porta orci.</p>
  <p>Aliquam imperdiet scelerisque purus, nec sagittis mi auctor vitae. Maecenas sodales scelerisque massa, vitae iaculis neque tincidunt sed. Vivamus id imperdiet lectus. Fusce id tellus ut tellus volutpat hendrerit in at justo. Duis eu tempus nibh. Nunc
    consectetur euismod sapien, eget placerat metus tempor sit amet. Maecenas at sem ac purus dictum viverra. Praesent eu neque in metus congue dictum eu in dolor. Mauris a elit sem. Quisque non velit malesuada ligula aliquet lacinia. Donec congue, leo
    lacinia vulputate pulvinar, est justo venenatis nisi, sit amet condimentum massa sem sed urna. Duis eget pretium eros. Sed et rutrum leo, sit amet sollicitudin urna. Nullam dui augue, malesuada sed lectus sed, malesuada fringilla massa.</p>
</div>

Upvotes: 1

Related Questions