Docs

[Timmy]

Hi!

I’m trying to achieve a slideout footer like this:
http://sivvr.com/

But I just can’t get the coding right… I know theme X can do pretty much everything soo i’m sure it can do this 🙂

Thanks in advance!
Timmy

[Christian]

Hey Timmy,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Timmy]

Hi again!

Well… It’s kind of hard to explain but I’m gonna give it a try.

I want the footer to slide out like it’s behind all the content on my page but when i scroll down to the bottom the footer gets revealed behind the content.

The link I sent, they have the footer animation, I want to achieve: http://sivvr.com/

It slides out and reveales like this:

Hope this is better! 🙂

[Christian]

I see. Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/.

I can give you a guide tough:

1. Your footer would be something like

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

2. The section above your footer must have a bottom margin that has the same height as your footer. For our Integrity 1 demo, the code would be

.x-colophon.top {
    margin-bottom: 135px;
}

http://i.imgur.com/zHYAjVi.gifv

Thanks for understanding. Take care!

[Timmy]

Your version looks awesome! The problem is that I don’t use .x-colophon.bottom, I just want to use the top.

Is that possible to do the same thing but with a cornerstone section instead? 🙂

P.S Thank you for a very welcoming answer 🙂

[Joao]

Hi There,

Try adding the following code to Appereance Customizer Custom CSS

.x-colophon.top {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

And than set the margin-bottom of your last Cornerstone section to 135px or similar value.

Let us know how it goes.

Thanks

Joao

[Timmy]

No 🙁

It just goes from this:

To this:

So no footer there… It just gets longer 🙁

[Rupok]

Hi there,

Let’s update the code a bit :

.x-main.full {
  z-index: 2;
  background: #fff;
  margin-bottom: 400px;
}

.x-colophon.top {
  background-image: url("http://timanity.se/wp-content/uploads/2016/07/Footer.jpg");
  bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 1;
}

And remove the margin-bottom for the last section.

Hope this helps.

Cheers!

[Timmy]

This works nearly perfect… I just got one problem 🙂

It shows when I’m on top of the page… On top of my rev slider 🙂

My URL: http://timanity.se/

Thank you!

[Timmy]

No problem! i solved it 🙂

Thank you soo much for your assistance!! 😀

[Friech]

Glad you sorted things out, should you require any further assistance with X|THEME and Cornerstone, please feel free to get in touch with us.

Cheers!

[Timmy]

I have a small issue… I just see half of the slider on my phone when i’m all the way down :O

[Nico]

Hi There,

Would you mind sharing us a screenshot of the problem so we could fully understand the problem.

THanks.

[Timmy]

Therese you go!

[Christian]

You must add a media query to increase the bottom margin of .x-main.full. Regretfully, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts