Editor Nav

by Rowan Hamilton

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<header class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" style="word-wrap: break-word">FileName Here</span>
    </div>
    <nav class="collapse navbar-collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <button type="button" class="btn btn-bs-purple dropdown-toggle" title="Snippets" data-toggle="dropdown" onclick="$('#snippetUl').css({ display: 'block' });" onblur="setTimeout(function(){$('#snippetUl').css({ display: 'none' });}, 200);" aria-haspopup="true" aria-expanded="false" style="padding:10px; margin-right: 15px;">
             <i class="fa fa-tags fa-lg"><span class="caret"></span></i>
            </button>
          </li>
          <li><button type="button" class="btn btn-bs" title="Save" onclick="savePage()" style="padding:10px; margin-right: 15px;"><i class="fa fa-floppy-o fa-lg"></i></li>
        <li><button type="button" class="btn btn-bs-green" title="Push to DEV" onclick="pushDev()" style="padding:10px; margin-right: 15px;"><i class="fa fa-exchange fa-lg"></i></li>
        <li><button type="button" id="search" class="btn btn-bs-yellow" title="Search Code" style="padding:10px; margin-right: 15px;"><i class="fa fa-search fa-lg"></i></li>
        <li><button type="button"...

CSS

body {
  padding-top: 55px;
  background: #14171A;
}

.form-group {
  margin-right: 60px;
  margin-left: 60px;
}

.top-buffer {
  margin-top: 20px;
}

.nav>li {
  display: inline;  
  text-align: center;
  margin: 5px;
}

.navbar-right {
    margin-right: -70px;
}

.navbar {
  height: 50px;
  background: #337ab7;
  background: #2e6da4;
  background: rgba(51, 54, 61, 0.56);;
}

.navbar .container .navbar-brand, .navbar .container .nav a {
  color: #337ab7;
}

.navbar .container .navbar-brand:hover, .navbar .container .nav a:hover {
  color: #5bc0de;
}

.navbar #search {
  cursor: pointer;
}

.navbar #search-bar {
  display: none;
}

.page-header .page-title {
  margin-top: 9px;
}

.page-header button {
  margin: 9px;
}

.panel {
  font-weight: 300;
  
  border: 0;
}

.panel .title {
  font-weight: 300;
}

.forumPost .panel .email {
  color: #aaa;
  
  font-size: 1.14em;
}

.forumPost .panel .date {
  color: #909090;
}

@media screen and (max-width: 768px) {
  .btn-block-xs {
    display: block;
    
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .pull-right-sm {
    float: right !important;
  }
}

.btn .caret {
    margin-left: 5px;
}

.btn-bs {
    border:none;
    border-width: 2px;
    background-color: rgba(121, 82, 179, 0);
    font-weight: 500;
    color: #52A6B3;
}


.btn-bs-green {
    border:none;
    border-width: 2px;
    background-color: rgba(121, 82, 179, 0);
    font-weight: 500;
    color: #1AD63A;
}

.btn-bs-purple {
    border:none;
    border-width: 2px;
    background-color: rgba(121, 82, 179, 0);
    font-weight: 500;
    color: #9380FF;
}

.btn-bs-red {
    border:none;
    border-width: 2px;
    background-color: rgba(121, 82, 179, 0);
    font-weight: 500;
    color: #F94545;
}

.btn-bs-yellow {
    border:none;
    border-width: 2px;
    background-color: rgba(121, 82, 179, 0);
    font-weight: 500;
    color: #C5C711;
}

.btn-bs:active,
.btn-bs:focus,
.btn-bs:hover {
    border-color: #52A6B3;
    color: #fff;
   ...

JavaScript

$("#search").click(function() {  
  if ($("#search-bar").css("display") == "none") {
    $("#search-bar").show("fast");
  } else {
    $("#search-bar").hide("fast");
  }
});