Hide Standard Lightning Page Header in Custom App page

From :

enter image description here

to This:

enter image description here

There are 2 ways of doing this.

Method 1

After W19, we can now add Lightning components as a tab. By adding as a tab, there will be no custom header. So I highly recommend this option until you don’t want to add any global action on your new tab page.

In your lightning component bundle, allow Lightning Tab as a target:

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Go to Setup > Tabs > Lightning Component Tabs. Click New, then choose your component.

Use your newly created Lightning Component Tabs instead of the Lightning Page Tabs.

Method 2

You can add a style sheet as a static resource and reference it in your component.

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

You can save this as whatever you like followed by .css, I named my file NoHeader.css

Next upload it to static resources on Salesforce: 

enter image description here

Then, anywhere in your component add the following snippet:

For AURA:

<ltng:require styles="{!$Resource.NoHeader}"/>

For LWC:

import HideLightningHeader from '@salesforce/resourceUrl/NoHeader';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

And then in the connectedCallBack() method:

connectedCallback() {
    loadStyle(this, NoHeader)
}

No more header in my lightning app! Cool!!

Source : https://salesforce.stackexchange.com/questions/260858/hide-standard-page-header-in-custom-lightning-app-page

Leave a Comment