On the header.php add bootstrap.js inside <body> after the <nav> class. If it’s inside <head>, it will never work until the day of judgement comes upon us.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>Still on the same file add this between <head> </head>,
<nav class="navbar navbar-expand-lg navbar-light topnav mb-5">
<div class="container-fluid">
<a class="navbar-brand h1" href="/">Byam</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto mr-5">
<li class="nav-item">
<?php wp_nav_menu( array(
'container_class' => 'main-nav',
'theme_location' => 'primary' ) );
?>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- container fluid -->
</nav> Make sure the div id is the same as data-target.
References:
- https://www.freecodecamp.org/news/how-to-build-a-responsive-navbar-with-a-toggle-menu-using-flexbox-3438e1d08783/