Sticky Knack Menu header

API & Customization Show & Tell
1

Gone for a really simple super easy touch today. I see a lot of people really liked the table sticky header concept so have done the same for sticky App menus.

This takes a little piece of code and applies the header to stick it’s position always to the top of the screen, regardless of its height.

Nothing else required apart from to apply the code, so copy, paste and enjoy :grinning: . Anything is possible so add your comments below and we can add to this if you want more.

Javascript

$(document).on('knack-page-render.any', function() {
  $('.knHeader, .kn-info-bar').wrapAll('<div class="headerContainer"><div>')
  const height = $(".headerContainer").height();
   $('#knack-body').css('padding-top',  height + 'px')
});

CSS

.headerContainer {
   position: fixed!important;
   width:100%;
   top:0px;
   z-index:1;
}
 
 .headerContainer  .kn-info-bar {
    background-color: rgb(228 228 228);
 }
1 Like