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): https://digitalfellows.eu/stuff/videos/sticky-not-working.mp4

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 */
header.uk-active {
   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 */
header.uk-active .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!