Bootstrap 4 Navbar toggler wont show up

Question

I recently added my toggler button (hamburger icon) code on my html however for some reason the hamburger wont show up and looks blank whenver I resize my screen and on smaller viewport.

Her's my html:

<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Friday Hero</a>
    <button class="navbar-toggler navbar-ligh" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">ABOUT <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ADVERTISE</a>
        </li>
        <li class="nav-item">
            <a class="nav-link login" href="#">LOGIN</a>
          </li>
      </ul>

    </div>
  </nav>

I tried to customize the color css thinking that might be the problem but for some reason the icon still won't show up. Any idea how to solve this?

score 2 · Answer 1 · edited Apr 18 '18 at 03:39

2

There is a small typo:

button class="navbar-toggler navbar-ligh" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation

should be :

button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation"

missing a "t" in navbar-ligh

edited Apr 18 '18 at 03:39

Saravanan Sachi

2,572
5
33
42

answered Apr 18 '18 at 03:31

Oscar Villalta

21
3

how do i change the color to white? – Apr 18 '18 at 03:35

score 0 · Answer 2 · answered Apr 18 '18 at 03:34

0

You have a typo in <button class="navbar-toggler navbar-ligh" ... \>, must be navbar-light

answered Apr 18 '18 at 03:34

genesst

1,333
1
10
39

how do i change the color to white? – Apr 18 '18 at 03:35
@TonyBeatty color of what? – genesst Apr 18 '18 at 03:36
@TonyBeatty you can add `bg-dark navbar-dark` classes in nav tag for dark navbar – Sakib Apr 18 '18 at 03:49

Hari17 · Answer 3 · 2018-04-18T04:21:57.720

0

You can change the color by adding navbar-default class to your code and change to your desired color by editing the css properties of the navbar-default class. Add the following classes to the button tag.

<button class="navbar navbar-toggler navbar-light navbar-default" role="navigation"></button>

and push the remaining CSS code to your Css file.

.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}

edited Apr 18 '18 at 04:21

answered Apr 18 '18 at 04:14

Hari17

481
1
4
12

Try this code to change the color...and update me after checking this code snippet...Good luck ;) – Hari17 Apr 18 '18 at 04:23

Bootstrap 4 Navbar toggler wont show up

3 Answers3