Bootstrap-Navbar looks different on mobile
I have programmed a website for web and mobiledevices and uploaded it to a domain. Some like navbar don't want to crash on my smartphone, if I resize the browser to the same size it works fine (look at the screenshots).
Mobile page screenshot
Page page screenshot
My code is disabled 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
<meta name="viewport" content="width=device-width, initial-scale=1">
tag. It works fine now.
source to share
In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library, not in separate files.
To ensure correct rendering and touch scaling, add a view meta tag to your head:
<meta name="viewport" content="width=device-width, initial-scale=1">
You can disable scalable capabilities on mobile devices by adding user-scalable = no to the view meta tag. This disables scaling, which means users can scroll through the pages, and your site's results look a bit like a native app. In general, we do not recommend this on every site, so be careful!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">