Enable a sticky header


Hi Beans Community, hello everyone. I found this code to enable a sticky header:

//Customize the child theme ouput
add_action( 'beans_before_load_document', 'custom_modify_child_theme' );
function custom_modify_child_theme() {
beans_remove_markup( 'beans_site' );
beans_add_attribute( 'beans_header', 'data-uk-sticky', 'top:0' );
}
//Enqueue custom assets
add_action( 'beans_uikit_enqueue_scripts', 'custom_enqueue_uikit_assets' );
function custom_enqueue_uikit_assets() {
beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );
}

The code works perfectly, but I am not sure, however, to have fully understood. I wonder:

To make it work, we needed to remove beans_site markup.

beans_remove_markup( 'beans_site' );

Why?

And one other question:

How can I decrease the height of the header, When scroll?

For now I added following CSS code, but does not seem to work.

.tm-header .uk-active {
background-color: #fff;
height: 100px;
}

Thanks in advance. Fabio.


Hi Fabio,

You don't need to remove the site for the sticky to work, I guess it is just that the person who posted the snippet needed it in her/his case but it isn't necessary.

Regarding reducing the height on active, you CSS is perfectly fine and it is the right way to do so 🙂

Have fun,


Thank you Thierry. I simplified the code above, whit this:

beans_add_attribute( 'beans_header', 'data-uk-sticky', 'top:0' );
beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );

This code works, but is it correct that I simplify it so much? Or Is it better to keep:

 add_action ();

Regarding CSS, when I add this code snippet below...

.tm-header {
background-color: #fff;
height: 70px;
}

...it RUN!

But, if i add the class .uk-active like this...

.tm-header .uk-active {
background-color: #fff;
height: 70px;
}

...it STOP RUN!

I don't know why!

Fabio


For compliancy sake, you should wrap your beans_uikit_enqueue_components in a beans_uikit_enqueue_scripts action 😉

Regarding the .uk-active, this class is only added when you scroll down. In other words, only when the header is sticky.

Thanks,



Hello Thierry,

the CSS reported by me above, just not work.

I modify it, and I found this solution:

header.uk-active {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}

It work and, I hope can be useful.


Finally,

I want also share the final code that I used to create my sticky header, inserted in my function.php:

//Enable a sticky header
add_action( 'beans_before_load_document', 'add_class_sticky_beans_header' );
function add_class_sticky_beans_header() {
beans_add_attribute( 'beans_header', 'data-uk-sticky', 'top:-200' );
}
//Enqueue custom assets
add_action( 'beans_uikit_enqueue_scripts', 'introduce_uikit_library_sticky' );
function introduce_uikit_library_sticky() {
beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );
}

Thanks, 🙂


Hey Fabio

Thank you very much for sharing! I am looking into creating tutorials and am looking for as many and various coding techniques as I can. If you have more you would like to share let me know..:)

Thank you again! This was very helpful!

Write a reply

Login or register to write a reply, it's free!