Hide Standard Lightning Page Header in Custom App page

Rate this post

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

2 Thoughts to “Hide Standard Lightning Page Header in Custom App page”

  1. Hi! this is exactly what I was looking for, thanks!
    One question please, I am very green with LWC…

    I went for the second method, so, the static resource was added, then pasted the code within the “aura” … (the .cmp file)

    Saved, and then added the component on the lightning page, and… it works!

    Just wanted to thank you and ensure I did not miss anything… as I did not use this last part of the instructions:

    And then in the connectedCallBack() method:

    connectedCallback() {
    loadStyle(this, NoHeader)
    }

    1. No worries. ConnectedCallback() is for LWC. I am glad the solution worked for you.

Leave a Comment