Sticky Footer?

4 replies · opened Apr 18, 2016

FflydzineApr 18, 2016

I cannot see any option to make the footer sticky, i.e. it remains in position on the page and the content scrolls in-between that & the menu header....

Is this possible within the code?

FflydzineApr 19, 2016

And also sticky menu? What I am trying to create is a static background image for each page, with a a sticky menu bar & footer. Then any content in between will scroll....

http://flydzine.com/combina/about.html

SSemicolon WebSTAFFApr 20, 2016

Hello,

  1. Please remove the .no-sticky Class from the #header Element to make the Header Sticky.

  2. You can simply add the .sticky-footer Class to the <body> Tag to make the Footer Sticky.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

FflydzineApr 27, 2016

The sticky header works, but can it be made so it doesn't shrink the size of the menu bar?

The sticky footer class addition doesn't seem to work...? It's been added on this page: http://flydzine.com/combina/about.html

SSemicolon WebSTAFFApr 28, 2016

Hello,

  1. This is Definitely Possible. Simply add the .static-sticky Class to the #header Element.

  2. Please consider adding the following CSS Code:

.device-lg.sticky-footer #footer,
.device-md.sticky-footer #footer { z-index: 2; }

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard