Bootstrap 4 Navbar won't toogle back - css

Question

I am using bootstrap 4 for my navbar, I can toogle down the hamburger button just fine but I can't toogle it back on the menu, it remains to be in a collapsed form. So how can I toogle it back to its menu?
I've tried data="collapse" on each nav-item just maybe it would work but it remained in a collapsed form.
.nav-fill .nav-item {
-webkit-box-flex: initial;
flex: initial;
text-align: initial;
}
ul li a.nav-link {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.02em;
}
.navigation .bg-light{
background-color: transparent !important;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="container">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
fyi: I placed my navbar under my header (because I needed to), could that be the case?
header{
display: flex !important;
flex-direction: column;
}
/*** HEADER *****/
.logo-wrapper img {
width: 100%;
display: block;
}
.logo-wrapper {
width: 100%;
display: block;
position: relative;
}
/* Navbar */
.nav-fill .nav-item {
-webkit-box-flex: initial;
flex: initial;
text-align: initial;
}
header {
background: url(../images/header_img.png) no-repeat top center transparent;
padding: 0 0;
background-attachment: inherit;
background-size: cover;
}
.header-bottom {
padding: 20px 0;
}
ul li a.nav-link {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.02em;
}
.navigation .bg-light{
background-color: transparent !important;
}
<header>
<div class="header-bottom">
<div class="container">
<div class="row">
<div class="icon-call col-md-4 col-xs-12 d-none d-md-block ">
<img src = "images/icon-call.png">xoxoxox
</div>
<div class="col-md-4 col-xs-12 col-sm-12">
<div class="logo-wrapper">
<img src = "images/logo.png" >
</div>
</div>
<div class="icon-social col-md-4 col-xs-12 d-none d-md-block">
<div class="social-media text-right">
<img src = "images/icon-fb.png" >
<img src = "images/icon-mail.png">
<img src = "images/icon-insta.png">
</div>
</div>
</div>
</div>
</div>
<div class="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Results</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>

Answer 1

your code is working fine, but try to use all the links properly like below
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
header{
display: flex !important;
flex-direction: column;
}
/*** HEADER *****/
.logo-wrapper img {
width: 100%;
display: block;
}
.logo-wrapper {
width: 100%;
display: block;
position: relative;
}
/* Navbar */
.nav-fill .nav-item {
-webkit-box-flex: initial;
flex: initial;
text-align: initial;
}
header {
background: url(../images/header_img.png) no-repeat top center transparent;
padding: 0 0;
background-attachment: inherit;
background-size: cover;
}
.header-bottom {
padding: 20px 0;
}
ul li a.nav-link {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.02em;
}
.navigation .bg-light{
background-color: transparent !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
<div class="header-bottom">
<div class="container">
<div class="row">
<div class="icon-call col-md-4 col-xs-12 d-none d-md-block ">
<img src = "images/icon-call.png">xoxoxox
</div>
<div class="col-md-4 col-xs-12 col-sm-12">
<div class="logo-wrapper">
<img src = "images/logo.png" >
</div>
</div>
<div class="icon-social col-md-4 col-xs-12 d-none d-md-block">
<div class="social-media text-right">
<img src = "images/icon-fb.png" >
<img src = "images/icon-mail.png">
<img src = "images/icon-insta.png">
</div>
</div>
</div>
</div>
</div>
<div class="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Results</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>