Moving tool buttons onto header

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
UI version: 8.7.0
Core version: 8.7.5

Detailed description of issue
I’ve hidden some unnecessary buttons on the header. I’d like to move the buttons that appear in the task bar into the empty space between the pan and search buttons. I’ve followed the example Hiding ribbons and pushing tools to top header but the overlay isn’t working correctly and the positioning is off.

The code I have attached pushes it to the end but I have tried using splice to include the buttons after the pan button but then the tools overlay disappears. This is similar behaviour to when I pop elements off the header array and then readd add them after adding the tools buttons.

I also have changed the behaviour of some of the buttons by adding onClick functions but they don’t appear to be triggered when I’ve moved them to the header.

Expected behaviour
image

Does your issue happen with every document, or just one?
Every document

Link to document
Not applicable

Code snippet
image

instance.UI.setHeaderItems(function(header) {
    // get the tools overlay
    const toolsOverlay = header.getHeader('toolbarGroup-Insert').get('toolsOverlay');
    header.getHeader('default').push({
        type: 'toolButton',            
        toolName: 'AnnotationCreateSignature'
      });
    header.getHeader('default').push({
        type: 'toolButton',
        toolName: 'AnnotationCreateRubberStamp'
      });
      header.getHeader('default').push({
        type: 'toolButton',
        toolName: 'AnnotationCreateStamp'
      });
    // add the line tool to the top header
    header.getHeader('default').push({
      type: 'toolGroupButton',
      toolGroup: 'calloutTools',
      dataElement: 'calloutToolGroupButton',
      title: 'annotation.callout',
    });
    // // add the tools overlay to the top header
    header.push(toolsOverlay);
  });
// hide the ribbons and second header
instance.UI.disableElements(['ribbons']);
instance.UI.disableElements(['toolsHeader']);