class change for sticky menu only works, when I'm logged in

Hey there,

Sorry that my first contribution is a request for help. I started working with beans some time ago and are very happy. Beans is great! 🙂

But now I have a problem, that I can't find a solution for. I made the header of a new website I started to build with Beans sticky. Also the size should change, when scrolling down.

As long as I'm logged in, it works perfect. When I log out, it doesn't work anymore....

A video of this behaviour (the two tabs are different containers, so in the first one I'm logged in, in the second one not):

The code I used in functions.php of the child theme:

//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:0' );
//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' );

The code I used for that in style.less of the child theme:

/* Sticky Header */ {
   box-shadow: 0px 1px 1px #ccc;
   border-bottom: 1px solid #ccc;
   background-color: #fff;
   padding-top: 40px;
   padding-bottom: 20px;
/* make the logo smaller on scroll */ .tm-logo {
   padding-top: 10px;
   height: 80px;

A quick fix could be to remove the height of the admin bar when logged out.

Maybe change the top value for [data-uk-sticky].uk-active (probably with !important) or a similar selector.

Write a reply

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