Bootstrap 4 Navbar

by Luke Marlow

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav mx-auto justify-content-center">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item navbar-brand">MM</li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</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;
  }
}