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.