Navbar toggler (bootstrap 4) is working but invisible. I can't see it but can be clicked and it is working

Question

quote This is my simple code and I have no idea why it is not working? The toggle button is not visible and whatever background color my navbar is, it overlaps the button without a button is visible. I am trying to learn this technology and I am a total beginner so please don't mind if I am doing a very silly mistake

<body>
        <nav class="navbar navbar-lt navbar-expand-sm fixed-top nb">
            <div class = "container">
                <button class = "navbar-toggler" type = "button" data-toggle="collapse" data-target = "#Navbar">
                    <i class="navbar-toggler-icon"></i>
                </button>

                <a class = " mr-auto navbar-brand myfont" href = ".\index.html">Sidhant Aggarwal</a>
                <div class = "collapse navbar-collapse" id = "Navbar">
                <ul class = "navbar-nav mr-auto">
                <li class = "nav-item"> <a class = "nav-link" href= "#"> About Me</a></li>
                <li class = "nav-item"> <a class = "nav-link" href= "#"> Resume</a></li>
                <li class = "nav-item"> <a class = "nav-link" href= ".\contactus.html">Certifications</a></li>
                </ul>
                </div>
            </div>

  This is the CSS stylesheet
    .nb{

        height: 100px;
        letter-spacing: 0.2em;
        line-height: 70px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        text-align: left;
        margin: 0px auto;
        color:black;


    }

    .navbar-brand{

        padding-right: 20px;
        color:black;
        margin-left: 80px;
        padding-right: 20px;


    }

    .nav-item{
        color: black;
        font-family: "Lato";

    }




    Please help!


  [1]: https://i.stack.imgur.com/JMZPu.png

Seems like jquery v3.5.0 and bootstrap v4.4.1 is having some issues. Just make sure you are using different versions and check — Dhruvil21_04, Apr 18 '20 at 06:33
"dependencies": { "bootstrap": "^4.4.1", "bootstrap-social": "^5.1.1", "font-awesome": "^4.7.0", "jquery": "^3.4.1", "popper.js": "^1.12.9" } — outofBounds, Apr 18 '20 at 07:03

score 1 · Accepted Answer · answered Apr 18 '20 at 08:57

There is a typo in your code... navbar-lt seems to be wrong

change <nav class="navbar navbar-lt navbar-expand-sm fixed-top nb">
into <nav class="navbar navbar-light navbar-expand-sm fixed-top nb">

and you'll be on your way...

.nb {
  height: 100px;
  letter-spacing: 0.2em;
  line-height: 70px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: left;
  margin: 0px auto;
  color: black;
}

.navbar-brand {
  padding-right: 20px;
  color: black;
  margin-left: 80px;
  padding-right: 20px;
}

.nav-item {
  color: black;
  font-family: "Lato";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-light navbar-expand-sm fixed-top nb">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                    <i class="navbar-toggler-icon"></i>
                </button>

    <a class=" mr-auto navbar-brand myfont" href=".\index.html">Sidhant Aggarwal</a>
    <div class="collapse navbar-collapse" id="Navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"> <a class="nav-link" href="#"> About Me</a></li>
        <li class="nav-item"> <a class="nav-link" href="#"> Resume</a></li>
        <li class="nav-item"> <a class="nav-link" href=".\contactus.html">Certifications</a></li>
      </ul>
    </div>
  </div>
</nav>

Navbar toggler (bootstrap 4) is working but invisible. I can't see it but can be clicked and it is working

1 Answers1