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}" );


/* Sticky Header - */ {    
   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. */ .tm-logo {    
   height: 80px;     
   padding-top: 10px; 

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


Older sticky footer code

/* */ 
.tm-main {    
   min-height: calc(72vh - 70px); 

An alternative: 
html, body {  
   font-size: 16px; 
   /* Sticky */  margin: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 with the option expand: true

Filed under: Learning

No comment yet, add your voice below!

Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *