Navbar Responsive

Expected behavior I'm very new to coding, but I'm trying to get a responsive navbar. I see my navbar on PC, but when I make the page phone sized, the whole navbar is gone. Actual behavior No navbar Resources (screenshots, code snippets etc.) #intro { background-image: url("https://secure.img1-fg.wfcdn.com/im/53876629/compr-r85/2668/26680269/wrapped-canvas-graphic-art.jpg"); height: 100vh; }

/* Height for devices larger than 576px */
@media (min-width: 992px) {
  #intro {
    margin-top: -58.59px;
  }
}

.navbar .nav-link {
  color: #fff !important;
}

  <!-- Navbar brand -->
  <a class="navbar-brand nav-link" target="_blank" href="https://mathewlukacs-mdb5-free-angular.mdbgo.io/">
    <strong>ilovenythismuch</strong>
  </a>

  <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExample01"
    aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-bars"></i>
  </button>
  <div class="collapse navbar-collapse" id="navbarExample01">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item active">
        <a class="nav-link" aria-current="page" href="https://mathewlukacs-mdb5-free-angular.mdbgo.io/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://mathewlukacs-mdb5-free-angular.mdbgo.io/" rel="nofollow"
          target="_blank">Sign up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.instagram.com/ilovenythismuch/" target="_blank">Follow me on Instagram! <i class="fab fa-instagram"></i></a>
      </li>
    </ul>

    <ul class="navbar-nav d-flex flex-row">

      <!-- Icons -->
      <li class="nav-item me-3 me-lg-0">
        <a class="nav-link" href="/" rel="nofollow"
          target="_blank">
          <i class="fab fa-youtube"></i>
        </a>
      </li>
      <li class="nav-item me-3 me-lg-0">
        <a class="nav-link" href="/" rel="nofollow" target="_blank">
          <i class="fab fa-facebook-f"></i>
        </a>
      </li>
      <li class="nav-item me-3 me-lg-0">
        <a class="nav-link" href="/" rel="nofollow" target="_blank">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
      <li class="nav-item me-3 me-lg-0">
        <a class="nav-link" href="/" rel="nofollow" target="_blank">
          <i class="fab fa-github"></i>
        </a>
      </li>
    </ul>
  </div>
</div>

Coming Soon... Start tutorial Download MDB UI KIT

    <div class="col-md-6 gx-5 mb-4">
      <h4><strong>Facilis consequatur eligendi</strong></h4>
      <p class="text-muted">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur
        eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum
        sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.
      </p>
      <p><strong>Doloremque vero ex debitis veritatis?</strong></p>
      <p class="text-muted">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod itaque voluptate
        nesciunt laborum incidunt. Officia, quam consectetur. Earum eligendi aliquam illum
        alias, unde optio accusantium soluta, iusto molestiae adipisci et?
      </p>
    </div>
  </div>
</section>
<!--Section: Content-->

<hr class="my-5" />

<!--Section: Content-->
<section class="text-center">
  <h4 class="mb-5"><strong>Facilis consequatur eligendi</strong></h4>

  <div class="row">
    <div class="col-lg-4 col-md-12 mb-4">
      <div class="card">
        <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
          <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.jpg" class="img-fluid" />
          <a href="#!">
            <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
          </a>
        </div>
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the
            card's content.
          </p>
          <a href="#!" class="btn btn-primary">Button</a>
        </div>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="card">
        <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
          <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/023.jpg" class="img-fluid" />
          <a href="#!">
            <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
          </a>
        </div>
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the
            card's content.
          </p>
          <a href="#!" class="btn btn-primary">Button</a>
        </div>
      </div>
    </div>

    <div class="col-lg-4 col-md-6 mb-4">
      <div class="card">
        <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
          <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.jpg" class="img-fluid" />
          <a href="#!">
            <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
          </a>
        </div>
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the
            card's content.
          </p>
          <a href="#!" class="btn btn-primary">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>
<!--Section: Content-->

<hr class="my-5" />

<!--Section: Content-->
<section class="mb-5">
  <h4 class="mb-5 text-center"><strong>Facilis consequatur eligendi</strong></h4>

  <div class="row d-flex justify-content-center">
    <div class="col-md-6">
      <form>
        <!-- 2 column grid layout with text inputs for the first and last names -->
        <div class="row mb-4">
          <div class="col">
            <div class="form-outline">
              <input type="text" id="form3Example1" class="form-control" />
              <label class="form-label" for="form3Example1">First name</label>
            </div>
          </div>
          <div class="col">
            <div class="form-outline">
              <input type="text" id="form3Example2" class="form-control" />
              <label class="form-label" for="form3Example2">Last name</label>
            </div>
          </div>
        </div>

        <!-- Email input -->
        <div class="form-outline mb-4">
          <input type="email" id="form3Example3" class="form-control" />
          <label class="form-label" for="form3Example3">Email address</label>
        </div>

        <!-- Password input -->
        <div class="form-outline mb-4">
          <input type="password" id="form3Example4" class="form-control" />
          <label class="form-label" for="form3Example4">Password</label>
        </div>

        <!-- Checkbox -->
        <div class="form-check d-flex justify-content-center mb-4">
          <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" checked />
          <label class="form-check-label" for="form2Example3">
            Subscribe to our newsletter
          </label>
        </div>

        <!-- Submit button -->
        <button type="submit" class="btn btn-primary btn-block mb-4">
          Sign up
        </button>

        <!-- Register buttons -->
        <div class="text-center">
          <p>or sign up with:</p>
          <button type="button" class="btn btn-primary btn-floating mx-1">
            <i class="fab fa-facebook-f"></i>
          </button>

          <button type="button" class="btn btn-primary btn-floating mx-1">
            <i class="fab fa-google"></i>
          </button>

          <button type="button" class="btn btn-primary btn-floating mx-1">
            <i class="fab fa-twitter"></i>
          </button>

          <button type="button" class="btn btn-primary btn-floating mx-1">
            <i class="fab fa-github"></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</section>
<!--Section: Content-->

Learn Bootstrap 5 Download MDB UI KIT

Follow MDB on social media

© 2020 Copyright: MDBootstrap.com