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



/* Sticky Header - */ {
   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. */ .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 */
 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 with the option expand: true


No comment yet, add your voice below!

Add a Comment

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

Comment *
Name *
Email *