CODEWITHSUNDEEP
csstwitter-bootstrap
JackSlayer94
JackSlayer94

Reputation: 855

Bootstrap 4 navbar doesn't show Toggler

I created an Angular 5 application and included Bootstrap 4 via index.html. I made a basic navbar component and tried to include it in my app. But in responsive mode, I am not able to see the toggler, it appears white but when inspecting I can see it as well as clicking on it also shows the menu. Why is it not being displayed properly?

I am using a simple navbar like below:

<nav class="navbar navbar-expand-lg shift">
  <a class="navbar-brand" href="#">
    <img src="logo.png" alt="Brand Logo" />
  </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav nav-pills ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Exams</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Here is my fiddle: jsfiddle

Upvotes: 0

Views: 2666

Answers (3)

Hameed Basha
Hameed Basha

Reputation: 149

Try this one : I just added bar's and little bit css style

<nav class="navbar navbar-expand-lg shift">
  <a class="navbar-brand" href="#">
    <img src="logo.png" alt="Brand Logo" />
  </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
      <div class="bar1"></div>
      <div class="bar1"></div>
      <div class="bar1"></div>
    </span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav nav-pills ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Exams</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

CSS STYLE

/* NAVIGATION */
nav ul li {
    display: inline-block;
}
nav ul li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #343b40;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
    transition: all .5s;
}
nav ul li a:hover {
    color: white;
}
/* SHIFT */
nav.shift ul li a {
    position:relative;
    z-index: 1;
}
nav.shift ul li a:hover {
    color: white;
}
nav.shift ul li a:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 1px;
    content: '.';
    color: transparent;
    background: #34caf7;
    visibility: none;
    opacity: 0;
    z-index: -1;
}
nav.shift ul li a:hover:after {
    opacity: 1;
    visibility: visible;
    height: 100%;
}

.navbar-toggler-right{
  background-color:red;
}

.navbar-toggler-icon{
 background-color:white;
  }

  .bar1{
       width: 30px;
    height: 2px;
    background-color: #000;
    margin: 6px 0;
    transition: 0.4s;
    }
  }

Change the colors and styles as yours wish ! Check this out ! https://jsfiddle.net/t4h0w4pw/3/

Upvotes: 2

Md. Shahidul Islam
Md. Shahidul Islam

Reputation: 330

In responsive mode, Toggler icon not showing because this icon class has some dependency. If you change code like this then it will be show:

<nav class="navbar navbar-light">

navbar-toggler-icon class have parent class. so, you should add parent class navbar-light, navbar-dark

Upvotes: 2

Coffee bean
Coffee bean

Reputation: 1504

You are missing the color theme in your nav element (navbar-light):

<nav class="navbar navbar-expand-lg shift navbar-light">

Fiddle here

Upvotes: 3

Related Questions