Bootstrap Ex

Base template for Jasny Bootstrap

by meatHucker

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<body>
    <div id="wrap">
    <header>    
      
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <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="#">
              <i class="ion-arrow-shrink" data-pack="default" data-tags="pinch"></i>
              <div class="">RMI</div>
              <div>CENTER</div>
            </a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active">
                <a href="#">
                  <span class="ion-person-stalker ui-circle-nav" data-pack="default" data-tags="pinch"></span> Employees <span class="sr-only">(current)</span>
                </a>
              </li>
              <li>
                <a href="#"><span class="ion-chatbubbles ui-circle-nav" data-pack="default" data-tags="pinch"></span> Messages
                </a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="ion-pinpoint ui-circle-nav"...

SCSS

$brand: #3e7793;
    

/* Sticky footer styles
      -------------------------------------------------- */

      html,
      body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -60px;
      }

      /* Set the fixed height of the footer here */
      #push,
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #f5f5f5;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          /* margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px; */
        }
        .navbar > .container .navbar-brand{
          margin-left: 35px!important;
        }
      }
      @media (min-width: 767px) {
        .navbar-right>li{
          float: none;
          &>a{
            padding-top: 2px;
            padding-bottom: 2px;
          }
        }
      }
      @media (min-width: 992px) {
        .navbar-right>li{
          float: left;
          &>a{padding-top: 10px;
            padding-bottom: 10px;
          }
        }
      }



      /* Custom page CSS
      -------------------------------------------------- */
      /* Not required for template or sticky footer method. */

      #wrap > .container {
        padding-top: 60px;
      }
      .container .credit {
        margin: 20px 0;
      }
      #footer{
        background: darken($brand, 20%);
        border-top: 1px solid darken($brand, 10%);
        padding: 10px 0 0;
        color: $brand;
      }
      code {
        font-size: 80%;
      }
      
      .navbar-inverse{
        background: darken($brand, 20%);
        .navbar-nav>li>a,
        .navbar-brand{
          color:...