Sticky header and footer

There is a quick way by using UiKit sticky to stick really any area of the page.

//UIkit sticky header 
beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' ); 
beans_add_attribute( 'beans_header', 'data-uk-sticky', "{top:5}" );

The CSS

/* Sticky Header - https://community.getbeans.io/discussion/enable-a-sticky-header/ */
header.uk-active {
   background-color: #fff;
   padding-top: 40px;
   padding-bottom: 20px;
   border-bottom: 1px solid #ccc;
   box-shadow: 0px 1px 1px #ccc;
}

/* To make the logo smaller on scroll and the following. */
header.uk-active .tm-logo {
   height: 80px; 
   padding-top: 10px;
}

/* hide tagline on scroll */
header.uk-active .tm-site-title-tag {
   display: none !important;
}

Resource:

https://community.getbeans.io/discussion/enable-a-sticky-header/

https://getuikit.com/v2/docs/sticky.html
https://community.getbeans.io/discussion/ulkit-scrollspy/

Older sticky footer code

/* https://css-tricks.com/couple-takes-sticky-footer/ */
.tm-main {
   min-height: calc(72vh - 70px);
}


An alternative:

html, body {
 font-size: 16px;
/* Sticky */
 margin:0;
 padding:0;
 height: 95%;
 line-height: 1.4em;
 background-color: #000; 
}

/* Sticky code */
.tm-site {
 min-height: 100%;
 position: relative;
 background-color: #fff;
}

/* body/content for sticky footer */
.tm-main {
 padding-top: 30px;
 padding-bottom: 80px; 
}

.tm-footer {
 padding: 10px 10px;
 background-color: #000;
/* Sticky code */
 position: absolute;
 bottom: 0;
 width: 100%;
}

The fixed/sticky footer that always is on the bottom of the browser window.

Just add the following fixed footer code to your tm-footer

.tm-footer {
/* Fixed footer */
position: fixed;
left: 0;
bottom: 0;
width: 100%; 
}

I am working on a better fixed/sticky footer so that it always stays at the bottom of the browser. The above approach does not fully work as it should.

Sticky footer is not working yet. I have tried this code:

beans_uikit_enqueue_components( array( 'height' ), 'add-ons' );
beans_add_attribute( 'beans_main', 'uk-height-viewport', "expand: true" );

//Another option…
beans_uikit_enqueue_components( array( ‘utility’ ), ‘add-ons’ );
beans_add_attribute( ‘beans_main’, ‘uk-height-viewport’, “expand: true” );

This when working will be added to the sticky/fixed footer and header tutorial.

add_action( ‘beans_uikit_enqueue_scripts’, ‘example_enqueue_uikit_assets’ );
function example_enqueue_uikit_assets() {
beans_uikit_enqueue_components( ‘utility’ );
}

//beans_uikit_enqueue_components( ‘utility’ );
//beans_add_attribute( ‘beans_main’, ‘uk-height-viewport’, ‘expand: true’ );

//beans_remove_attribute( ‘beans_main’, ‘class’, ‘uk-block’ );

Use https://getuikit.com/docs/height#viewport-height with the option expand: true

// https://getuikit.com/assets/uikit/tests/height-viewport.html