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
No comment yet, add your voice below!