Cascade Canine Rescue

cascade-canine-rescue.markdown

Cascade Canine Rescue

A Pen by Bryce S. on CodePen.

License.

index.slim

      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <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="#"><span style="color:white;">CCREW</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#"><span style="color:white;">Our Mission</span></a></li>
              <li><a href="#"><span style="color:white;">Dogs for Adoption</a></li>
              <li><a href="#"><span style="color:white;">Donate</a></li>
              <li><a href="#"><span style="color:white;">Resources</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
  
  
 
   

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.less

body {
  font-family: 'Amatic SC', cursive;
}
.heading {
  padding-top: 120px;
}
.navbar {
  height: 100px;
}
.navbar-default {
  background-color: #3c896d;
}
.navbar-brand {
  padding-top:40px;
  font-size: 80px;
  height:100px;
  padding-left: 30px;
}

#navbar li {
  font-size: 30px;
  padding-top: 25px;
  padding-left: 35px;
  padding-right: 25px;
} 

li :hover {
  font-size: 35px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}
@media (min-width: 768px){
.navbar-nav{
    margin: 0 auto;
    display: table;
    table-layout: fixed;
    float:none;
}
}
.navbar-toggle {
  background-color: white;
  height: 75px;
  width: 75px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />