0

I am using bootstrap for my navbar along with custom CSS. I am having an issue, when my navbar collapses the navbar-toggler-icon is invisible but still functions properly. I think my custom CSS is causing this but I can't figure out how to get the icon to be visible. Is there a way I cant get the icon to show up, and keep my custom CSS? 

.navbar {
  background-color: rgb(63, 81, 181) !important;
  font-size: 14px !important;
}

body {
  overflow: hidden !important;
}
.btn-primary {
  background-color: rgb(63, 81, 181) !important;
  height: 50% !important;
  margin-top: 6px !important;
}

.collapse {
  margin-top: 10px !important;
}
#omagee {
  height: 100vh !important;
  width: 100vh !important;
}
 <nav class="navbar navbar-expand-lg py-0">
                <div class="container w-100">
                  <a class="navbar-brand p-3 text-white" href="#">IMT Ministries Web Portal</a>
                  <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarCollapse"
                    aria-controls="navbarCollapse"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                  >
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav ml-md-auto mr-0 ">
                      <li class="nav-item">
                        <p class="nav-link text-white" id="NavLinks" 
                          >Username:<span class="sr-only">(current)</span>
                          <input id ="userName" type="text"></input></p>
                        
                      </li>
                      <li class="nav-item">
                        <p class="nav-link text-white" id="NavLinks" 
                          >Password:
                          <input id="password" type="password"></input></p
                        >
                      </li><a href = ""><button type="button" id="submitLogin" class="btn btn-primary btn-sm">Submit</button></a>
                      
                    </div>
                    </ul>
                  </div>
              </nav>
j08691
  • 204,283
  • 31
  • 260
  • 272
Patrick Caserta
  • 1
  • 2
  • Basically a duplicate of https://stackoverflow.com/questions/42188698/bootstrap-navbar-nothing-is-displayed-on-smaller-devices/42190344#42190344 – Carol Skelly Dec 03 '19 at 20:54
  • I tried doing what they recommended in that forum, but all that happened was the icon turned into a white or dark block. I couldn't get the custom CSS to do anything. – Patrick Caserta Dec 03 '19 at 21:06
  • Yes, that's correct.. your question says "but I can't figure out how to get the icon to be visible" navbar-dark or -light will make it appear. If you want to customize the toggler icon: https://stackoverflow.com/questions/42586729/bootstrap-4-change-hamburger-toggler-color/42587673#42587673 – Carol Skelly Dec 03 '19 at 21:25

0 Answers0