0

I wrote a code of a toggle button to be seen when the screen size of the browser is reduced on the navbar using bootstrap4 but the button is not showing please what is wrong with my code:

<nav class="navbar navbar-expand-lg">
   <button class="navbar-toggler " data-toggle="collapse" data- 
      target="#navbarcollapse">
   <span class="navbar-toggler-icon" ></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarcollapse">
      <ul class ="navbar-nav mr-auto">
         <li class="nav-item  active"><a href="#"class="nav-link">Home</a></li>
         <li><a href="#" class="nav-link">Services</a></li>
         <li><a href="#"class="nav-link">Downloads</a></li>
         <li><a href="#"class="nav-link">Projects</a></li>
         <li><a href="#"class="nav-link">About Us</a></li>
         <li><a href="#"class="nav-link">Contact</a></li>
      </ul>
   </div>
</nav>
Lior Bar-On
  • 10,784
  • 5
  • 34
  • 46
toby
  • 3
  • 4

1 Answers1

1

Just added bg-light navbar-light and the button was visible.

<nav class="navbar navbar-expand-lg bg-light navbar-light">
   <button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#navbarcollapse">
   <span class="navbar-toggler-icon" ></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarcollapse">
      <ul class ="navbar-nav">
         <li class="nav-item"><a href="#"class="nav-link">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Downloads</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Projects</a></li>
         <li class="nav-item"><a href="#"class="nav-link">About Us</a></li>
         <li class="nav-item"><a href="#"class="nav-link">Contact</a></li>
      </ul>
   </div>
</nav>
Harshit
  • 886
  • 7
  • 18
  • 1
    it works but i added a css to the navbar to change its color, how can i choose any preferable color to add to the navbar instead of white and black. – toby Feb 20 '19 at 16:38
  • you can do it refer https://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap – Harshit Feb 20 '19 at 16:39