Bootstrap dropdown menu is hidden when page is responsive

Question

I have a custom navbar.css to color the navbar in red, everything seems working except that when I scale the size of the browser (or when I try the responsiveness of the website), the dropdown menu of the navbar (where there is a link to Home and other pages) disappears.

Is still present when I use the website with my PC but with smartphone I can't see it, even if it is clickable, thus I think it is a problem of colors and css but I can't figure what.

.navbar {
    background-color: #e74c3c;
  }
  .navbar .navbar-brand {
    color: #fafeff;
  }
  .navbar .navbar-brand:hover,
  .navbar .navbar-brand:focus {
    color: #fafeff;
  }
  .navbar .navbar-text {
    color: #fafeff;
  }
  .navbar .navbar-text a {
    color: #fafeff;
  }
  .navbar .navbar-text a:hover,
  .navbar .navbar-text a:focus {
    color: #fafeff; 
  }
  .navbar .navbar-nav .nav-link {
    color: #fafeff;
    border-radius: .25rem;
    margin: 0 0.25em;
  }
  .navbar .navbar-nav .nav-link:not(.disabled):hover,
  .navbar .navbar-nav .nav-link:not(.disabled):focus {
    color: #fafeff;
  }
  .navbar .navbar-nav .nav-item.active .nav-link,
  .navbar .navbar-nav .nav-item.active .nav-link:hover,
  .navbar .navbar-nav .nav-item.active .nav-link:focus,
  .navbar .navbar-nav .nav-item.show .nav-link,
  .navbar .navbar-nav .nav-item.show .nav-link:hover,
  .navbar .navbar-nav .nav-item.show .nav-link:focus {
    color: #fafeff;
    background-color: #f4503f;
  }
  .navbar .navbar-toggle {
    border-color: #f4503f;
  }
  .navbar .navbar-toggle:hover,
  .navbar .navbar-toggle:focus {
    background-color: #f4503f;
  }
  .navbar .navbar-toggle .navbar-toggler-icon {
    color: #fafeff;
  }
  .navbar .navbar-collapse,
  .navbar .navbar-form {
    border-color: #fafeff;
  }
  .navbar .navbar-link {
    color: #fafeff;
  }
  .navbar .navbar-link:hover {
    color: #fafeff;
  }

  @media (max-width: 575px) {
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #fafeff;
    }
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #fafeff;
    }
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #fafeff;
      background-color: #f4503f;
    }
  }

  @media (max-width: 767px) {
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #fafeff;
    }
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #fafeff;
    }
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #fafeff;
      background-color: #f4503f;
    }
  }

  @media (max-width: 991px) {
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #fafeff;
    }
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #fafeff;
    }
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #fafeff;
      background-color: #f4503f;
    }
  }

  @media (max-width: 1199px) {
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #fafeff;
    }
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #fafeff;
    }
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #fafeff;
      background-color: #f4503f;
    }
  }

  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #fafeff;
  }
  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #fafeff;
  }
  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #fafeff;
    background-color: #f4503f;
  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-default static-top">
  <div class="container">
    <a class="navbar-brand" href="/index.html">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/index.html">Home
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Can you help me understading where is the problem?

Answer 1

You can try like below :

.navbar {
  background-color: #e74c3c;
}

.navbar .navbar-brand {
  color: #fafeff;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #fafeff;
}

.navbar .navbar-text {
  color: #fafeff;
}

.navbar .navbar-text a {
  color: #fafeff;
}

.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #fafeff;
}

.navbar .navbar-nav .nav-link {
  color: #fafeff;
  border-radius: .25rem;
  margin: 0 0.25em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #fafeff;
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #fafeff;
  background-color: #f4503f;
}

.navbar .navbar-toggle {
  border-color: #f4503f;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #f4503f;
}

.navbar .navbar-toggle .navbar-toggler-icon {
  color: #fafeff;
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #fafeff;
}

.navbar .navbar-link {
  color: #fafeff;
}

.navbar .navbar-link:hover {
  color: #fafeff;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #fafeff;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #fafeff;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #fafeff;
    background-color: #f4503f;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #fafeff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #fafeff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #fafeff;
    background-color: #f4503f;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #fafeff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #fafeff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #fafeff;
    background-color: #f4503f;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #fafeff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #fafeff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #fafeff;
    background-color: #f4503f;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #fafeff;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #fafeff;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #fafeff;
  background-color: #f4503f;
}


/*added this line to toggle*/

#toggle {
  width: 28px;
  height: 30px;
  margin: 10px auto;
}

#toggle div {
  width: 100%;
  height: 5px;
  background: white;
  margin: 4px auto;
  transition: all 0.3s;
  backface-visibility: hidden;
}

#toggle.on .one {
  transform: rotate(45deg) translate(5px, 5px);
}

#toggle.on .two {
  opacity: 0;
}

#toggle.on .three {
  transform: rotate(-45deg) translate(7px, -8px);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-default static-top">
  <div class="container">
    <a class="navbar-brand" href="/index.html">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  <!--added this -->
  <div id="toggle">
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
 </div>
       
      </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/index.html">Home
            </a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!--added these script-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>