Sticky header and footer

Creating a sticky header with UiKit.

//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; 
   top: 0 !important; /* Default element style adds a top: 5px; 
   which causes a gap above the header. */
} 

/* 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.htmlhttps://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/fixed 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.

The UIkit method for creating a sticky/fixed 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