Sidebar overlaps footer

[DreadyE]

Hi all,

I know this is a question which has been asked many times before, but believe me.. i tried, for days… Seems i am not smart enough to fix this myself. I hope a CSS guru here will point me my mistake and hopefully how to fix it.

I restyled our WordPress theme (bazar theme+woocommerce) and because (on the shop page) the sidebar was fixed at the top of the page it became invisible when people scrolled down on the content area. So, i made the sidebar position fixed, which works like charm, but now if there are not a lot products on the shop page the sidebar overlaps the footer.

My site is http://www.mymalls.com.
You can really see the problem in full effect on: http://www.mymalls.com/product-category/travel/booking-flights-travel/

Please wizards, help me, i would be grateful for ever! :)

[Paulie_D]

Try Google search for Sticky Footer.

[DreadyE]

I installed the WordPress Sticky Footer Plugin but it doesn’t do anything… I think it is not compatible with my theme. Any other tips? :)

[Paulie_D]

Change your theme?

[DreadyE]

Hmmm, not really an option. My footer is “fixed” at the bottom of the page though, it doesn’t come up at all.
The main problem is the sidebar overlaps the footer, not the footer getting out of place.

Or am i looking at it wrongly?

[Soren]

Is the sidebar fixed for any specific reason? The quick win is to let it scroll.

[Paulie_D]

Hmmm…..if sticky footers are ‘incompatible’ then I guess you’re just stuck with it. Especially as your sidebar height changes due to the expanding nature of your menu and the fact that it’s fixed.

The only thing I can think of is using JS to alter the height of a sidebar wrapper so that the footer moves down accordingly.

[Paulie_D]

Is the sidebar fixed for any specific reason? The quick win is to let it scroll.

+1

:)

[DreadyE]

I made the sidebar fixed because the sidebar used to scroll out of the screen at the top. So people had to scroll up again to use it. Maybe i did a total wrong approach…

With making the sidebar scroll you mean within its wrapper?

[DreadyE]

I kinda like the JS solution. I think that is what i need to make it perfect. Any tips on this or do I need to post this in another form category?

Thanks guys, I really appreciate your help!

[Soren]

With making the sidebar scroll you mean within its wrapper

Yeah, just the usual wordpress way. Primary div (main content) and Secondary (sidebar) wrapped inside a parent div/section.

I know what you mean about having to scroll up but to me that’s just the way it is. The nature of tall sidebars. You’ve fixed it so the user can always have access to the top sidebar content but this can deny them access to the bottom.

If you were my “client” and you asked to see the sidebar fixed, I’d show you this:

http://postimg.org/image/nb4ku3wq7/

This is a 15″ screen and I lose access to some sidebar content. That’s why I suggested not making things harder for yourself. Go with the natural flow of the web (says the man who spent a month fighting a horizontal scrolling fixed footer layout :)

[Author]

Posts