How to get footer to hug the bottom

Support
#1

How do i get the footer to hug the bottom of the screen? There is a gap on the desktop and a really large gap on mobile. I want to create a menu of four icons in corners.

Here’s an example: https://radicalandfree.com/radical-nation/

THanks

#2

I think this is the code you need to add to your Theme Options CSS editor

.x-colophon {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Cheers

#3

Hey Denaj,

There’s an area in Pro that stays at the bottom of the screen throughout the screen sizes and that’s the Bottom Header. You can add your icons in there.

I see you also have X licenses and just note that this is not possible in X without writing your own code like @snowtura suggested.

Hope that helps.

1 Like
#4

@christian am using Pro on this site. thanks for the screenshot. I just cant get that bottom header option to show up. I’ve seen it before somewhere. What should I do.

#5

Hello Denaj,

Your footer does not display at the bottom of the browser because there aren’t enough content which fill the browser window. To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-main {
    min-height: calc(100vh - 102px);
}

100vh means the whole height of the browser and 102 is the total height of the header and footer.

We would love to know if this has worked for you. Thank you.

#6

It worked, but now I have to scroll to see the footer. which is weird because like you said, I don’t have enough content. I only have to scroll on mobile. Desktop looks great. thank you

#7

Hello Denaj,

In mobile screens, it is normal to scroll to see the footer because the height of the contents of the page. The mobile screen heights are way more shorter than the desktop browsers.

Hope this helps.

#8

OKay, I guess I’ll just have to live with that. One more question: now that I have icons in four corners, how do I add a url to the icon?

#9

Hello Denaj,

If you want to the icons to have link, then use the Social element instead.

Hope this helps.

#10

Thank you to everyone with the fast response times. That’s all the questions for now. I still wish the bottom footer could be visible as the effect is kind of lost if it is out of sight. As it stands now there will be no reason for a user to think to scroll.

#11

Hey Denaj,

Before you go, I’d just like to answer your question about the Bottom Header as that is a feature of Pro that will let you achieve what you need (area positioned at the bottom of the screen). Please check the video below.

Hope that helps.

#12

that’s exactly what I’m going for. For some reason however when I click on layout, none of those alignment options show up

#13

Hi Denaj,

Base on your screenshot you’re working on Footer Builder, the Bottom Bar feature that Christian’s shows you is part of the Header, so you work it in the Header Builder.

Hope that shed some lights,
Cheers!

1 Like
#14

GREAT SCOTT @friech ! that was it! I created another header bar at the bottom and changed page template to header with no footer and we are cooking now. Thank you all! Pro is more flexible than I realized.

#15

We are delighted to assist you with this.

Cheers!

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.