Sticky Knack Menu header

API & Custom Code 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
2

I gave this a shot today and find that after the first page view, subsequent pages lose the top of the working area (they have scrolled up a bit but cant be scrolled back down.

3

Thanks to the magic of ChatGPT, I found this CSS works well for me to make the kn-info-bar sticky.

/* Make the kn-info-bar sticky so it doesnt scroll /
.kn-info-bar {
position: fixed;
top: 90px; / Adjust based on the height of your menu above /
width: 100%; / Ensures it spans the width of the screen /
z-index: 5; / Ensures it stays on top of other content except the drop down menus from above /
background-color: rgb(240, 243, 247); / To prevent transparency /
border-bottom: 1px solid rgb(189, 181, 181); / Adds a thin darker border /
}
.kn-scenes {
margin-top: 40px; / Adjust this to move the main bosy up or down in comparison to skicky headers */
}