Bootstrap 4 Navbar

by Ian Campbell

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark fixed-top affix-top">
  <a class="navbar-brand" href="{% url 'home' %}">
    <h2 id='logo'>
      Jet-Set Offset
    </h2>
    <h5 class="d-none d-md-block">Air travel is bad for the planet. When we fly, we can do better.</h5>
  </a>
  <button class="hamburger hamburger--slider-r navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdodwn" aria-expanded="false" aria-label="Toggle navigation">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
        <!--<span class="hamburger-label">Menu</span>-->
      </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav text-center ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'about' %}">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'partners:partners-list' %}">Our Partners</a>
      </li>

    </ul>
  </div>
</nav>

CSS

body {
  background-color: skyBlue;
  min-height: 200vh;
}

/* MORE THAN 75 Xl */

@media (max-width: 74.9em) {
  body {
    background-color: pink;
  }
}

/* LESS THAN 75 Lg */

@media (max-width: 61.9em) {
  body {
    background-color: blue;
  }
}

/* LESS THAN 62 Md */

@media (max-width: 47.9em) {
  body {
    background-color: green;
  }
}

/* LESS THAN 48 Sm */

@media (max-width: 33.9em) {
  body {
    background-color: red;
  }
}

/* LESS THAN 34 Xs */

/* Navbar Styles */

.navbar {
  border-radius: 0;
}

.navbar-toggler {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.navbar-toggler:hover {
  background: rgb(240, 240, 240)
}

.navbar-toggler:focus {
  outline: 0;
}

/* Navbar Collapse Styles To Stack Items At Mobile Widths*/

@media(max-width:47.9em) {
  .navbar .navbar-brand {
    float: none;
    display: inline-block;
  }
  .navbar .navbar-nav>.nav-item {
    float: none;
    margin-left: .1rem;
  }
  .navbar .navbar-nav {
    float: none !important;
  }
  .nav-item {
    width: 100%;
    text-align: left;
  }
}