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,

OK, 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!