How to remove Lightning App Page Header [LWC]

In this tutorial, I will show you how to remove Lightning App Page Header using Lightning Web Components and CSS. In the images below you can see the final result.

Before

After

Create a CSS-File and paste the “noHeader.resource” Code-Snippet. Then create a Static Resource and upload it.

noHeader.resource

.slds-page-header.header.flexipageHeader {
    display: none;
}

exampleComponent.js

import {LightningElement} from 'lwc';

//Import your CSS-File from the Static Resources
import noHeader from '@salesforce/resourceUrl/NoHeader';
//Import loadStyle-Method
import {loadStyle} from "lightning/platformResourceLoader";

export default class LwcExampleComponent extends LightningElement {

    connectedCallback() {
        loadStyle(this, noHeader)
            .then(result => {});
    }

}

That’s it!

I hope you have enjoyed learning “How to remove Lightning App Page Header [LWC]”. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

If you prefer to see the result with Lightning Aura Components, here’s the link to it: How to remove Lightning App Page Header [Aura].

Resources

Salesforce Lightning Component Library
Lightning Design System

Already subscribed?

We send out a newsletter with new tutorials once or twice a month. We would be very happy about a subscription!

How to assign Profile User to a Permission Set in Apex

How to assign Profile User to a Permission Set in Apex?It often happens that one of my customers wants to have a new permission set created and at the same time wants the users of one or more profiles assigned to this new permission set. This is easily done...

How to create a reusable field search Lightning Web Component

How to create a reusable field search Lightning Web ComponentIn this tutorial, I will show you how to create a reusable field search Lightning Web Component. In the GIF below you can see the final result. A brief summary of how the field search Lightning...