Jump to content
kurraglen

Get footer to stick to bottom of page

Recommended Posts

Hi,

I am trying to get the footer to stick to bottom of screen but after trying all of the methods that I know and some more Googling, no luck. Maybe I am too fussy but....

I am using the latest version of Cubecart with Noodleman skin.

Thanks, Bruce

Share this post


Link to post
Share on other sites

Welcome kurraglen! Glad to see you made it to the forums.

I don't have a copy of Noodleman skin, but I assume it is a variant of Foundation.

You can edit the file cubecart.css or cubecart.default.css. I recommend cubecart.default.css.

cubecart.css should have this already:

footer {
  background-color: #000;
  color: #fff;
}

We need to add more rules, so, in cubecart.default.css:

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

You need to have CubeCart clear its internal cache, and possibly force your browser to reload page resources (generally by CTRL-F5).

Share this post


Link to post
Share on other sites

Thanks for the help, bsmither,

I think you are correct in that the Noodleman skin is based on the Foundation skin.

I did as you suggested and it does have the desired effect but the problem is that it then covers up some of the bottom of the pages. I have attached an image.

Regards, Bruce

 

bottom footer.png

Share this post


Link to post
Share on other sites

It would be good if it didn't cover up the bottom of the page because there is the register button that a user cannot click on. It won't scroll past what I showed on the first screen shot.

Thanks.1252705390_bottomfooter1.png.4c9f73b68b9f540bb029298f766f577f.png

Share this post


Link to post
Share on other sites

We need the footer to stay below everything on the page - below even the very last bit of normal page contents?

Isn't that what it did before the edit?

Oh, wait. I think I see what you are after.

Share this post


Link to post
Share on other sites

Maybe that's because a side panel is that tall.

But I think I see what you want.

Share this post


Link to post
Share on other sites

I did something similar to a test install some time ago. But it only works with keeping things stuck to the top.

I used the jQuery plugin from: http://stickyjs.com

We may need to find something else.

Share this post


Link to post
Share on other sites

Thanks bsmithers,

 

I will do some playing around. Odd that on every other static website that I have done, that css for the footer worked. Thanks again.

Share this post


Link to post
Share on other sites

I think I have something.

We will edit the skin template main.php:

Find:

</head>

On a new line ABOVE that, ADD:

<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}
</style>


Find:

            {include file='templates/box.off_canvas.left.php'}
            {include file='templates/box.eu_cookie.php'}

On a new line AFTER that, ADD:

         </div>
      </div>


Near the bottom, find:

            {include file='templates/ccpower.php'}
         </div>
      </div>
      {include file='templates/element.markup.json-ld.php'}

Change to:

            {include file='templates/ccpower.php'}
      {include file='templates/element.markup.json-ld.php'}



Find:

            <footer>

Change to:

            <div class="sticky"><footer>


Find:

            </footer>

Change to:

            </footer></div>

The above is just an experiment. We will need to put the correct CSS in a CSS file.

Share this post


Link to post
Share on other sites

This does not work out as well as I had thought. When viewing on a mobile device, the footer takes up the whole screen - just at the bottom - like the sticky is supposed to.

So, we will need to find a way to make the Documents box a lot smaller in the small view. Maybe make it an off-canvas box.

Perhaps the reason that the sticky thing didn't work for you is because:

<div class="off-canvas-wrap" data-offcanvas>

is an ancestor container (to the sticky div) that has overflow:hidden. Apparently, this destroys the stickiness.

So, the edit to that statement closed the div blocks, leaving the rest of the page as a sibling. That allowed the stickiness to work.

Share this post


Link to post
Share on other sites

Closing the off-canvas block early - that is, not having the main page content within the "inner-wrap" block - makes the off-canvas fly-in menus not work at all on a mobile screen.

So, back to square one.

Share this post


Link to post
Share on other sites

Currently, my approach is to make the documents box an off-canvas thing.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×