Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Place footer to the bottom and center menu items

Featured Lock Resolved Issue
Hi there
I tried several solutions provided in this forum, but none of them worked. I use Hellx 3 and try

(a) to place footer always at the bottom of the page (but not a fixed one)
(b) to center the menu items (not the text, but the items)

Concerning (a): With position absolute, footer isn't at bottom and covers text.

Please check on: http://www.vrenigiger.ch

Thanks for your reply
Alexandra

14 Answers

Shibbir

More than a month ago #Permalink
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.

graustufen

More than a month ago #Permalink
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

Shibbir

More than a month ago #Permalink
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.

graustufen

More than a month ago #Permalink
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…

Shibbir

More than a month ago #Permalink
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.

graustufen

More than a month ago #Permalink
The link I sent you has less content…

Shibbir

More than a month ago #Permalink
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.

graustufen

More than a month ago #Permalink
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

Shibbir

More than a month ago #Permalink
Hi there,

This site vrenigiger.ch is password protected.

Thanks.

graustufen

More than a month ago #Permalink
Hi
It is no longer protected, so you can check it.

Alexandra

Shibbir

More than a month ago #Permalink
Hi
It is no longer protected, so you can check it.

Alexandra


Hi

What's the different between 2 website?

Thanks.

graustufen

More than a month ago #Permalink
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.

Attachments (2)

  • graustufen.png
    graustufen.png 523.4 KB
  • vrenigiger.png
    vrenigiger.png 334.2 KB

graustufen

More than a month ago #Permalink
Any suggestions concerning may problem?
Alexandra

pepperstreet

More than a month ago #Permalink
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.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 98
Toufiq

Toufiq

Total Accepted Answers: 51
Sifat

Sifat

Total Accepted Answers: 38
Ofi Khan

Ofi Khan

Total Accepted Answers: 21
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 21

119

Templates

306696

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us