Hide Standard Lightning Page Header in Custom App page
From :
to This:
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:
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!!
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)
}
No worries. ConnectedCallback() is for LWC. I am glad the solution worked for you.