CODEWITHSUNDEEP
htmlcsssticky-footer
Nicholas Allen
Nicholas Allen

Reputation: 3

(CSS) My fixed footer overlaps my content

So I am having an issue using a fixed footer. Essentially what is happening is the footer will get stuck at the bottom of the browser window but not the bottom page, and covers some of the content.

<body>
    <nav class="fixed-nav-bar">
      <div id="menu">
       <a class="sitename" href="index.html"><h1>Sitename</h1></a>
       <a class="show" href="#hidemenu"><img class="menubur" src="img/menu.svg" alt="menu"></a>
    				<ul class="menu-items">
    					<li><a href="shop.html">shop</a></li>
    					<li><a href="portfolio.html">portfolio</a></li>
    					<li><a href="contact.html">contact</a></li>
    					<li><a href="log.html">log</a></li>
    					<li><a href="about.html">about</a></li>
    				</ul>
    			</div>
    		</nav>
    		<section class="content">
        <section class="about">
    			<section class="floated">
    				<img src="img/monkey.jpg" alt="monkey">
    			</section>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    			<div class="faqs">
    			<button class="accordion">Question 1</button>
    			<div class="panel">
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    			</div>
    			<button class="accordion">Question 2</button>
    			<div class="panel">
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    			</div>
    			<button class="accordion">Questions 3</button>
    			<div class="panel">
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    			</div>
    			</div>
    		</section>
    		</section>
    		<footer class="footer">
    			<p class="footer-links">
    				<a href="http://www.instagram.com/">Instagram</a>
    				<a href="http://www.facebook.com/">Facebook</a>
    				<a href="http://www.twitter.com/">Twitter</a>
    				<a href="https://www.tumblr.com/blog/">Tumblr</a>
    				<a href="http://www.snapchat.com">Snapchat</a>
    			</p>
    			<p class="footer-company-name">Name &copy; 2017</p>
    		</footer>
        </body>

And the CSS:

body {
   margin-bottom: 100px;
   clear: both;
}

.fixed-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    height: 10px;
    background-color: #fff;
    color: #000033;
}

.content {
    margin-top: 100px;
}

.fixed-nav-bar li, .fixed-nav-bar a {
  background: #fff;
    height: 50px;
    line-height: 50px;
}
.menu {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
  background: #fff;
}
.menu-items {
    position: absolute;
    right: 10px;
    display: inline-block;
    float: right;
    padding: 0px;
  background: #fff;
}
.sitename {
    position: absolute;
    left: 10px;
    display: inline-block;
    margin-right: 20px;
    text-decoration: none;
  background: #fff;
}
.menu-items li {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
}
.menu-items a {
    text-decoration: none;
}

.show, .hide {
    display: none;
    padding-left: 15px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center left;
    color: #dde1e2;
}
.footer{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    background-color: #fff;
    width: 100%;
    text-align: center;
    font: normal 18px sans-serif;
    padding: 20px;
    margin-top: 80px;
}



.footer .footer-company-name{
    margin: 0;
}

.footer .footer-links{
    padding: 35px 0 23px;
    margin: 0;
}

.footer .footer-links a{
    display:inline-block;
    text-decoration: none;
    color: inherit;
}

Here's a fiddle: https://jsfiddle.net/7taxrv1x/4/

I have tried a few solutions on the subject, some of which are in the footer. What I do not want is like the solution here: My Footer Floats

Upvotes: 0

Views: 766

Answers (2)

Eric Wiener
Eric Wiener

Reputation: 5947

You can solve this by removing the bottom margin from your page

body {
    //remove margin-bottom: 100px;
    clear: both;
}

And and changing your footer styles to: 

.footer{
    //remove position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    background-color: #fff;
    width: 100%;
    text-align: center;
    font: normal 18px sans-serif;
    padding: 20px;
    margin-top: 80px;
}

Upvotes: 0

Toni Cobbit
Toni Cobbit

Reputation: 11

In CSS file comment or remove the margin-bottom: 100px; from body selector and position: absolute; from .footer selector.

Upvotes: 1

Related Questions