Navbar Toggle button does not appear

I'm making a responsive menu bar with Bootstrap 4, however when I reduce the size, the Toggle button to open the collapsed menu does not appear. Here is the 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;
}