Bootstrap snippet: Social Navbar

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<script src="https://use.fontawesome.com/cb2d0db4c2.js"></script> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" 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> <a class="navbar-brand" href="#"> Brand </a> </div> <!-- Search Navbar --> <form class="navbar-form navbar-left search-container hidden-xs" role="search"> <div class="form-group"> <input class="form-control" placeholder="Search" type="text"> </input> </div> <button class="btn btn-default btn-search" type="submit"> <i aria-hidden="true" class="fa fa-search text-center"> </i> </button> </form> <!--END Search navbar --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-left"> <!--Search xs --> <li class="visible-xs "> <form class="navbar-form navbar-left search-xs" role="search"> <div class="form-group"> <input class="form-control" placeholder="Search" type="text"> </input> </div> <button class="btn btn-default search-btn-xs pull-right" type="submit"> Submit </button> </form> </li> <!-- END Search xs --> <li class="active"> <a href="#"> Home <span class="sr-only"> (current) </span> </a> </li> <li> <a href="#"> Profile </a> </li> <li data-placement="bottom" data-toggle="tooltip" title="Friend requests"> <a href=""> <i aria-hidden="true" class="fa fa-user"> </i> </a> </li> <li data-placement="bottom" data-toggle="tooltip" title="Messages"> <a href=""> <i aria-hidden="true" class="fa fa-envelope-o"> </i> </a> </li> <li data-placement="bottom" data-toggle="tooltip" title="Notifications"> <a href=""> <i aria-hidden="true" class="fa fa-globe"> </i> </a> </li> <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"> <i aria-hidden="true" class="fa fa-wrench"> </i> <span class="caret"> </span> </a> <ul class="dropdown-menu"> <li> <a href="config.html"> Configurations </a> </li> <li> <a href="#"> Another action </a> </li> <li> <a href="#"> Something else here </a> </li> <li class="divider" role="separator"> </li> <li> <a href="#"> About </a> </li> <li class="divider" role="separator"> </li> <li> <a data-target="#myModal" data-toggle="modal" href="#myModal"> <i aria-hidden="true" class="fa fa-sign-out"> </i> Exit </a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collxapse --> </div> <!-- /.container-fluid --> </nav> <!-- Configuration Modal --> <div class="modal fade" id="myModal" role="dialog" tabindex="-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button aria-label="Close" class="close" data-dismiss="modal" type="button"> <span aria-hidden="true"> × </span> </button> <h4 class="modal-title"> <i aria-hidden="true" class="fa fa-sign-out"> </i> Exit </h4> </div> <div class="modal-body"> <p> Are you sure you want to quit? </p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" type="button"> Close </button> <button class="btn btn-primary" type="button"> Exit </button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- Configuration modal --> </div>
/* Search navbar*/ .stylish-input- .input-group-addon { background: white !important; } .stylish-input-group .form-control { border-right: 0; box-shadow: 0 0 0; border-color: #ccc; } .stylish-input-group button { border: 0; background: transparent; } .search-container { width: auto; } .navbar .container { margin-top: 10px; padding-bottom: 10px; } .search-container .form-group { width: auto; } .search-container input { width: 100% !important; } .btn-search { margin-left: -5px; } .search-xs { width: 90% !important; margin-left: 5%; } .search-btn-xs { margin-top: -39px !important; }
chubureitor

Social Navbar

chubureitor
  Sep 4th, 17:43
78 Views