How to remove Header block for a specific page

[AbhilashMo4]

Is there any way to remove Header block for a specific page in EDS, currently it's being loaded on page load across all EDS pages

[RaphaelWe · Accepted solution]

Sure, you can modify scripts.js to fit your needs, e.g. add logic that skips loading the header on line 106: https://github.com/adobe/aem-boilerplate/blob/main/scripts/scripts.js#L106

A common pattern is to use metadata properties(global or page level) to toggle certain features. getMetadata() makes it quick and easy to extract metadata values.

[sarav_prakash]

Correct as Raphael points, header is loaded from scripts.js.loadHeader(). 

In our project, we hide based of page template. Like we have condition 

if (!isCheckoutPage()) {
    loadHeader(doc.querySelector('header'));
  }

Another ootb flag is window.hlx.suppressLoadHeaderFooter. Refer here https://github.com/dylandepass/rosalind-boilerplate/blob/89d0d7ce8c03881287f5a1377c7957e53009d3ef/sc...

if (!window.hlx.suppressLoadHeaderFooter) {
    loadHeader(doc.querySelector('header'));
    loadFooter(doc.querySelector('footer'));
  } else {
    document.querySelector('header').remove();
    document.querySelector('footer').remove();
  }

With this ootb flag, we can configure required pages to suppress header/footer. 

Overall, asking to conditionally load header/footer. Condition can be configured in different ways, whichever is convenient to maintain. 

[Jitender_RawatGu]

and you will show different header and footer in different page using sheet