I am developing a website using ASP.NET MVC. Bootstrap is used for the UI. I have the below HTML in my layout view.
<body>
@*Header*@
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">App Name</a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
@*<li class="active"><a href="#">Dashboard</a></li>*@
<li><a href="#">Menu1</a></li>
<li><a href="#menu2">Menu2</a></li>
<li><a href="#menu3">Menu3</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div>
@RenderBody()
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">
© 2017 xxxxxxxxxx
</p>
<a class="navbar-btn btn-default btn pull-right">
<span class="glyphicon glyphicon-tower"></span> <strong>This is test</strong>
</a>
</div>
</div>
</body>
When I try to see the page in smaller devices (iPhone5/6) etc, I see that the contents from my content page grows below the sticky footer and hence not getting displayed. But, the display is fine in bigger devices. How can I add a scrollbar, or make the content scrollable when viewed in smaller devices?
Fixed navbars overlap main content by default. To avoid this you need to add margins to your content block. According to bootstrap 3 it will look like this:
And then in your styles file: