How to make make navbar responsive, using a template - html

Question

I'm using a colorlib template called faithful: https://colorlib.com/wp/template/faithful/
Basically I changed the css and the navbar to a horizontal one, the problem is when I view it in mobile, it doesn't work
This is what I did to change the navbar to a horizontal one
<div class="site-navbar-wrap js-site-navbar bg-white">
<div class="container">
<div class="site-navbar bg-light">
<div class="py-1">
<div class="row align-items-center">
<div class="col-2">
<a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/company_logo.png" alt="logo"></a>
</div>
<div class="col-10">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<ul class="navbar-default" id="menu">
<li class="active">
Home
</li>
<a class="dropdown-toggle fa" data-toggle="dropdown" href="about.html" >About Us<span></span></a>
<ul class="dropdown-menu">
<li>Our Company</li>
<li>Team</li>
<li>Goals</li>
<li>Location</li>
</ul>
<li>Products</li>
</li>
<li>Merchandise</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
I want the navbar to work on mobile (showing a button on the right)
I tried everything I could but it still doesn't work and I've already finished the design of the website, I just really need to change the navbar.

Answer 1

<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<!-- Collapse button -->
<button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">goals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">location</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">merchandise</a>
</li>
</ul>
</div>
</nav>
you can modify and use this