[Solved] How to show the document header row when scrolling down

One thing that I haven’t liked is that the Actions button scrolls out of view as I scroll the page down. The main header stays in view but I don’t really need it that often.

This document client script changes the way the header works and keeps the important actions visible the whole time.

$(document).on('page-change', function(e) {

    // Source: https://stackoverflow.com/questions/19401633/how-to-fire-an-event-on-class-change-using-jquery
    // console.log("Setup observer on header");
    var $div = $("div.page-head");
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {

        var attributeValue = $(mutation.target).prop(mutation.attributeName);
        // console.log("Style attribute changed to:", attributeValue);

        if (attributeValue.cssText.includes("navbar-height")){
            $( "div.page-head" ).css("z-index","4");
        } else {
            $( "div.page-head" ).css("z-index","2040");
    observer.observe($div[0], {
      attributes: true,
      attributeFilter: ["style"]


Implemented this and worked very well. Now issue is ERPnext messages appear behind the actions bar and cannot be moved. So there is no way to see message.

Is there a way to have this be behind the popup messages?


Yes, I recall seeing that too. I am not sure how to resolve that. Sorry.