After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked perfectly (refer to the screenshots).
Mobile Screenshot of the page https://i.stack.imgur.com/Rs0H4.jpg
PC Screenshot of the page https://i.stack.imgur.com/Vxcgy.jpg
Here is the code snippet for the navbar:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#myNavbar-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">PageName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar-1">
<ul class="nav navbar-nav hidden-sm hidden-xs">
...(some tabs)
</ul>
<ul class="nav navbar-nav pull-right hidden-sm hidden-xs">
...(some tabs)
</ul>
<ul class="nav navbar-nav visible-sm visible-xs">
...(some tabs)
</ul>
</div>
</div>
</nav>
Edit Solution: I forgot to add the
<meta name="viewport" content="width=device-width, initial-scale=1">
tag. Now it works fine.