On every mobile device, it appears similar to the image below:
HTML:
<div class="wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top " >
<div class="container">
<a href="indexf.php" class="navbar-brand"> <img src="image/logo3.png" height="30px" alt=""></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active ">
<a href="index.php" class="nav-link ">Home</a>
</li>
<li class="nav-item active">
<a href="#aboutus" onclick="href='index.php#aboutus'"; class="nav-link">About Us</a>
</li>
<li class="nav-item active">
<a href="#service" onclick="href='index.php#service'"; class="nav-link" >Services</a>
</li>
<li class="nav-item active">
<a href="CLients.php" class="nav-link">Our CLients</a>
</li>
<li class="nav-item active">
<a href="#authors" onclick="href='index.php#authors'"; class="nav-link">Our Team</a>
</li>
<li class="nav-item active">
<a href="prodect.php" class="nav-link">products</a>
</li>
<li class="nav-item active">
<a href="contactits.php" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<!-- Button trigger modal -->
<a href="contactits.php" class="btn nav-link active" style="background-color: transparent;border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
border-color: lightgray;">+92-42-35791029</a>
</li>
</ul>
</div>
</div>
</nav>
</div>