Resolved Place footer to the bottom and center menu items

Hello Alexandra

a) You can bellow CSS to place footer always at bottom.

#sp-footer {

    background-color: #8d2b6b;

    color: #ffffff;

    position: fixed;

    bottom: 0;

    z-index: 1;

    float: left;

}

b) To center the menu item use bellow CSS code in custom.css file at line number 40 :

.sp-megamenu-parent {

    float: none;

    text-align: center;

}

Thank You.

Hi Shibbir
Thanks – (b) worked perfectly. But concerning (a): As I have written, I don't want the footer to be fixed – it just should appear at the bottom of the screen even if content is less high than screen. With your solution, it is fixed. Any suggestions?

Thank you
Alexandra

Hi Shibbir
Thanks – (b) worked perfectly. But concerning (a): As I have written, I don't want the footer to be fixed – it just should appear at the bottom of the screen even if content is less high than screen. With your solution, it is fixed. Any suggestions?

Thank you
Alexandra

HI there,

So when you have less content then footer is coming to top from bottom, right ? If so then you need set the minimum height for the content section.

Thanks.

It should be like here: http://graustufen.ch/referenzen

If less content = footer stays at bottom. To set a min-height isn't a good idea for this I think…

It should be like here: http://graustufen.ch/referenzen

If less content = footer stays at bottom. To set a min-height isn't a good idea for this I think…

Hi

Please create a new demo page with less content then I can check it.

Thanks.

The link I sent you has less content…

Hi there,

Check this image : https://www.dropbox.com/s/dg746apmmz0ot78/Screenshot%202017-04-12%2014.32.26.png?dl=0

I have deleted the main content but bottom is still on the bottom.

Thanks.

Hi
That is exactly, how it should be on vrenigiger.ch as well. The method, I used to code this on Graustufen.ch doesn't work with the helix template on vrenigiger.ch – so any suggestions how to do it?

Alexandra

Hi there,

This site vrenigiger.ch is password protected.

Thanks.

Hi
It is no longer protected, so you can check it.

Alexandra

Hi
It is no longer protected, so you can check it.

Alexandra

Hi

What's the different between 2 website?

Thanks.

If you test vrenigiger.ch on a smaller screen you notice, that footer doesn't stay at bottom if there is less content (white space under footer) – on Graustufen.ch footer is always at bottom. See attached screens.

Any suggestions concerning may problem?
Alexandra

Hello Alexandra, you may use "fixed" or "absolute" as position for the footer section. Messure the actual height of your footer. Use the same (or a slightly higher) value for "padding-bottom" on the wrapping div. Have a look in the page source, there should be a body wrapper and another inner one. Try only one of them.

Alternatively, you might also use a "margin-bottom" on the main body section. Depends on the rest of your content and pages. I believe the latter solution is used on your graustufen site.

Either way should prevent the "overlapping" footer area. Which you wanted to avoid.

Hope this helps.