Bootstrap navbar, why is my navbar not expanding properly - html

Question

Could someone help me fix my navbar ? It is not expanding properly when clicking on the toggler, im sure i've misplaced a div but I have moved around elements with very little success...
<header class="site-header" role="banner">
<div class="navbar-wrapper">
<nav class="navbar navbar-light bg-light navbar-expand-lg ">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- end button -->
<a class="navbar-brand" src="index.html"><img class="logo-brand"src="img/kin.jpg" alt="header icon"></a>
<!-- collapsed section -->
<div class="navbar-collapse collapse" id="navbarToggler">
<!-- ml-auto for right and mr-auto for left -->
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
</ul>
</div>
</nav> <!--navbar -->
</div><!--navbar wrapper-->
</header>
I've compared it to a code that works and cannot find the difference... anyone with a good eye to fix me mistake ?
Ive copied a working collapsing navbar in my code and the same thing happens it the wrapper wont expand while the text comes out of its parent
Thanks

Answer 1

Take a look at following example:
Your code has no problem.
Be sure you provide right links for libraries. I added bootstrap css and js library links. And it needs Jquery before bootsrap js link.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<header class="site-header" role="banner">
<div class="navbar-wrapper">
<nav class="navbar navbar-light bg-light navbar-expand-lg ">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- end button -->
<a class="navbar-brand" src="index.html"><img class="logo-brand"src="img/kin.jpg" alt="header icon"></a>
<!-- collapsed section -->
<div class="navbar-collapse collapse" id="navbarToggler">
<!-- ml-auto for right and mr-auto for left -->
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
</ul>
</div>
</nav> <!--navbar -->
</div><!--navbar wrapper-->
</header>

Answer 2

`
Test Home
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1.0" shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
`
Also, do not forget to add the initial stylesheet imports in the head of the HTML document as that stylesheet will play a key role in displaying the page properly. Specifying the width for the device width will allow the html document to adjust to the device width and UTF-8 specifies the character encoding to the HTML interpreter its something that all developers should get into the habit of including!