Mark
asked on
Twiiter bootstrap v3 fixed-footer overlays content
I am trying to put a footer on my page (not sticky to where it's always visible but flush on the bottom of the page) The code I am using is:
I have tried adding
As suggested by twitter bootstrap docs but I'm still have the same problem:
Content in the page is overlapping with the footer ..
Please advise
<div class="navbar navbar-inverse navbar-static-bottom navbar-custom" role="navigation" style="
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a href="/"><img src="lib/companyimg/main.png" style="height:50px;width:auto;vertical-align:top !important;padding-top:4px;padding-bottom:4px;padding-right: 20px;padding-left:0px;" border=0></a>-->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Sitemap</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">My Saved Searches</a></li>
<li><a href="#">Become An Agent</a></li>
<li><a href="#" onclick="JavaScript:$('#HelpModal').modal('show');">Contact Us</a></li>
</ul>
</div>
</div>
</div>
I have tried adding
body {
height: 100%;
padding-top: 50px;
padding-bottom: 50px;
margin-bottom: 80px;
}
As suggested by twitter bootstrap docs but I'm still have the same problem:
Content in the page is overlapping with the footer ..
Please advise
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.