![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/ab6dc08a67065e0025b27dbcd480e95d-87a1c39.jpg)
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.
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
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,
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/ab6dc08a67065e0025b27dbcd480e95d-87a1c39.jpg)
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
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
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,
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/ab6dc08a67065e0025b27dbcd480e95d-87a1c39.jpg)
OK, Thanks!
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/ab6dc08a67065e0025b27dbcd480e95d-87a1c39.jpg)
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, π
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/dd8a7951ddc458f9e92259a96cabdf4d-87a1c39.jpg)
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!