Navbar Toggle button does not appear

Asked

Viewed 1,430 times

0

I am making a responsive menu bar with Bootstrap 4, but when I reduce the size, the Toggle button to open the collapsed menu does not appear. Follow HTML and CSS code:

HTML: 

    <a class="navbar-brand logo" href="#">
        <img src="img/init1.svg" width="50" height="50" alt="Init 1 - Comece 
Pensando!" class="d-inline-block">
        <span class="logo-txt">Init1</span>
    </a>
    <button class="navbar-toggler hidden-lg-up" type="button" data-
toggle="collapse" 
        data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>        
    </button>

    <div class="collapse navbar-collapse justify-content-end" 
id="navbarNav">
        <ul class="nav navbar-nav">
            <li class="nav-item"><a class="nav-link" 
href="index.html">Home</a></li>
            <li class="nav-item"><a class="nav-link" 
href="index.html">Aprenda</a></li>
            <li class="nav-item"><a class="nav-link" 
href="index.html">Artigos</a></li>
            <li class="nav-item"><a class="nav-link" 
href="index.html">Sobre</a></li>
            <li class="nav-item"><a class="nav-link" 
href="index.html">Acesse Já!</a></li>
        </ul>
    </div>

</nav>

CSS:

/*===================================== NAVIGATION========================================*/


/*====== LOGO ==========*/

.logo-txt {
color: #00838f;
font-size: 1.5em;
vertical-align: middle;
}

.logo::before {
content: "<";
font-weight: 400;
font-size: 2em;
vertical-align: middle;
color: #546e7a;
}

.logo::after {
content: "/>";
font-weight: 400;
font-size: 1.7em;
vertical-align: middle;
color: #546e7a;
}


/*========= NAVBAR ============*/

nav {
background-image: url(../img/menubar.png);
background-repeat: no-repeat;
}
twitter-bootstrap responsive-layout bootstrap-4 bootstrap-toggle

  • Reduce the size and put this on the console: $(".navbar-toggler-icon").css("background","red");. See if anything turns up.

  • It became a red square.

  • Yeah. The button’s there, only it’s empty. There should be a burger?

  • Yes. navbar-Toggler-icon is the class for burger button!

  • You didn’t put the css bootstrap after js?

1 answer

0

You need to open the tag <nav> with the classes required by Bootstrap:

<nav class="navbar navbar-light">
<a class="navbar-brand logo" href="#">
        <img src="img/init1.svg" width="50" height="50" alt="Init 1 - Comece Pensando!" class="d-inline-block">
        <span class="logo-txt">Init1</span>
    </a>
    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse"  data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>        
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="nav navbar-nav">
            <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html">Aprenda</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html">Artigos</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html">Sobre</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html">Acesse Já!</a></li>
        </ul>
    </div>
</nav>

Browser other questions tagged twitter-bootstrap responsive-layout bootstrap-4 bootstrap-toggle

You are not signed in. Login or sign up in order to post.