Sticky Footer and Nav Hover

**mbond5** · Oct 17, 2012 07:31

Hey Guys,

Just need help figuring out how I can make my footer a sticky footer so its always after all the content and my background doesnt show up after the footer like it does on larger screens for some pages.

Also, on my Nav say on the homepage when your on the homepage I have orange bar underneath the page you are on but when I rollover other pages it shows up which I want but if your on home and roll over Home it shows up twice the border and nudges the slider down, any way I can edit my CSS to fix this issue.

Heres the link to the site...

http://184.154.226.19/~bobswoo6/

Thanks guys,

Mike

**ralph.m** · Oct 17, 2012 08:38

Sticky footers are tricky, so you have to get the code right. Try to follow this tutorial carefully:

http://www.sitepoint.com/forums/show...66#post1239966

However, my preferred option is just to set the body background to the color of the footer, so if there's space at the bottom, the footer color extends right down (in your case, orange). Then you have to put a white bg color on the main area, though.

The double line on the nav is caused by this:

Code:

.selected {
  color: black !important;
  border-bottom: 5px solid #D9531E !important;
}

It would be better to have the .selected class on the <a> rather than the <li>, and then you wouldn't get this conflict.

Maybe change it to

Code:

.selected a {
  color: black !important;
  border-bottom: 5px solid #D9531E;
}

**mbond5** · Oct 17, 2012 09:20

Thanks Ralph that worked well the double line on the nav.

Now just to add the sticky footer, really want to solve it as it being a sticky footer.

I've done it before in the past just seem to be having more issues with this site for some reason.

Thanks,

Mike

**ronpat** · Oct 17, 2012 11:20

This is probably a naive question, but why do you want to put a sticky footer on this site? The pages that I've looked at seem to be taller than most monitor windows, so the behavior of a sticky footer would never come into play. "Tips and Resources" and "Wood Fireplaces" might fit on a vertically oriented screen, maybe, depending on rez. Just curious.

**mbond5** · Oct 17, 2012 11:23

That is the reason on my screen it doesnt go to the bottom cause I'm on a large monitor.

**ronpat** · Oct 17, 2012 15:11

Try the following:

On the index page, add the following new div below the <body> tag:

Code:

<div id="outer">

The new div is closed by a stray "close wrapper" tag.

On your css sheet, make the following changes:

Code:

below line 19:

body:before {    /* Opera and IE8 "redraw" bug fix */
    content:"";
    float:left;
    height:100%;
    width:0;
    margin-top:-32767px;
}

#outer {
    min-height:100%;
    margin:-70px auto 0px;    /* negative of footer height */
}

Line 126:

#header {
    height: 122px;
    background: #FFF;
    margin: 0 auto;
    border-top:70px solid #fff;    /* same value as footer height */
}

Line 285:

.copyright {
    width:285px;
    margin:0px 0px 0px 650px;    /* this probably fixes the original culprit */
}

**ralph.m** · Oct 17, 2012 16:12

Originally Posted by mbond5

Now just to add the sticky footer, really want to solve it as it being a sticky footer.

I gave you lins above for a sticky footer, and also suggested an alternative. Did you not see the comments?

**mbond5** · Oct 18, 2012 07:55

EDIT...

Thanks for the help, solved the issue it was issue with my helpful tips page I missed a div causing it to mess up.

Thanks guys!

**Mc_Viper** · Nov 24, 2012 19:39

i tried many css sticky footers and they dont render correctly when resizing the window quickly, try this sticky footer worked perfectly for me,

hope this helps.

User Tag List

Thread: Sticky Footer and Nav Hover

Thread Tools

Display

Sticky Footer and Nav Hover

Bookmarks

Bookmarks

Posting Permissions