Jump to content

Get footer to stick to bottom of page


kurraglen

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

Link to comment
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).

Link to comment
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

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...