Google plus navbar style

This bootstrap snippet called "Google plus navbar style" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: navbar,style,user,menu

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


                      
<div class="navbar navbar-fixed-top header">
     <div class="col-md-12">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Dey-Dey</a>
          <button data-target="#navbar-collapse1" data-toggle="collapse" class="navbar-toggle" type="button">
          <i class="glyphicon glyphicon-search"></i>
          </button>
      
        </div>
        <div id="navbar-collapse1" class="collapse navbar-collapse">
          <form class="navbar-form pull-left">
              <div style="max-width:470px;" class="input-group">
                <input type="text" id="srch-term" name="srch-term" placeholder="Search" class="form-control">
                <div class="input-group-btn">
                  <button type="submit" class="btn btn-default btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                </div>
              </div>
          </form>
          <ul class="nav navbar-nav navbar-right">
             <li><a target="_ext" href="http://www.bootdey.com">Bootdey.com</a></li>
             <li>
                <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="glyphicon glyphicon-bell"></i></a>
                <ul class="dropdown-menu">
                  <li><a href="#"><span class="badge pull-right">40</span>Link</a></li>
                  <li><a href="#"><span class="badge pull-right">2</span>Link</a></li>
                  <li><a href="#"><span class="badge pull-right">0</span>Link</a></li>
                  <li><a href="#"><span class="label label-info pull-right">1</span>Link</a></li>
                  <li><a href="#"><span class="badge pull-right">13</span>Link</a></li>
                </ul>
             </li>
             <li><a id="btnToggle" href="#"><i class="glyphicon glyphicon-th-large"></i></a></li>
             <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li>
           </ul>
        </div>    
     </div>	
</div>
<!--- subnav -->
<div id="subnav" class="navbar navbar-default">
    <div class="col-md-12">
        <div class="navbar-header">
          
          <a data-toggle="dropdown" class="navbar-btn btn btn-default btn-plus dropdown-toggle" style="margin-left:15px;" href="#"><i style="color:#dd1111;" class="glyphicon glyphicon-home"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small></a>
          <ul class="nav dropdown-menu">
              <li><a href="#"><i style="color:#1111dd;" class="glyphicon glyphicon-user"></i> Profile</a></li>
              <li><a href="#"><i style="color:#0000aa;" class="glyphicon glyphicon-dashboard"></i> Dashboard</a></li>
              <li><a href="#"><i style="color:#11dd11;" class="glyphicon glyphicon-inbox"></i> Pages</a></li>
              <li class="nav-divider"></li>
              <li><a href="#"><i style="color:#dd1111;" class="glyphicon glyphicon-cog"></i> Settings</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a></li>
          </ul>
          
          
          <button data-target="#navbar-collapse2" data-toggle="collapse" class="navbar-toggle" type="button">
          <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 id="navbar-collapse2" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
             <li class="active"><a href="#">Posts</a></li>
             <li><a data-toggle="modal" role="button" href="#loginModal">Login</a></li>
             <li><a data-toggle="modal" role="button" href="#aboutModal">About</a></li>
           </ul>
        </div>    
     </div>	
</div>                                                                                                                                            

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


                       
.header {
    background-color: #FFFFFF;
    border-width: 0;
}
#subnav {
    position: fixed;
    width: 100%;
}
.navbar-default {
    background-color: #F4F4F4;
    border-width: 0;
    margin-top: 50px;
    z-index: 5;
}

.btn-primary, .label-primary, .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background-color: #4285F4;
}
.btn-primary {
    border-color: rgba(0, 0, 0, 0);
}
.btn, .form-control, .panel, .list-group, .well {
    border-radius: 1px;
    box-shadow: 0 0 0;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li:hover > a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: rgba(0, 0, 0, 0);
    border-color: #4285F4;
    border-image: none;
    border-style: solid;
    border-width: 0 0 2px;
    font-weight: 800;
}                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.0

Created: May 10th 2014, 18:34

Views: 4.7K

Rated 5/5 based on 1 reviews