Hide Standard Page Header in Custom Lightning App page

Question

Is there a way to hide the page header in a custom Lightning App shown below ? This banner is not available in the Edit page section.

I have selected 'One region Template' and added just one Lightning component.

But after saving the header comes by default which I want to remove.

PS: I was able to remove the header by putting the display as none as shown below. But don't know which standard class to refer in css

Answer 1

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.

Answer 2

I know the name of the class in question is "slds-page-header".

As an example, I've edited my own page to get rid of the header by changing the css specific to that class (this first picture is the "before"):

And after editing the style by adding "display: none" for that class (slds-page-header):

And now the header is gone from my page. How do I add this css style change to the lightning app page? This question says to upload the css as a static resource and call the resource in the lightning web component. I'm not sure how to do that. Anyone?

Update:

A much more restrictive change to the css would look like this:

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

Update #2:

Ameer Awad's answer seems to apply only to aura components whereas I am using lightning web components. However, his answer pointed me in the right direction. I uploaded a static resource as he suggested, and then in the .js for my component, I added these imports:

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

And then in the connectedCallBack() method:

    connectedCallback() {
    loadStyle(this, HideLightningHeader)
}

No more header in my lightning app! Cool!!

Answer 3

---

6/15/21 Update

Static Resource solution updated to work with Summer '21 Release.

New Version

[app_flexipage-header_header-host]{
    display:none;
}

Old Version

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

---

Following up from previous answers, you can add a style sheet as a static resource and reference it in your component. The way to do that is to open up any text editor, I used notepad on my HP. You then insert the following code:

[app_flexipage-header_header-host]{ 
    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:

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

That should be it!

Answer 4

I have faced the same issue recently, I did try to change the Lightning App Tab to a Lightning Component Tab. But this will restrict us from editing our Lightning App Page via the Lightning App Builder.

Instead, I created a custom LWC for that, whereby in my component I'm hiding the standard banner on the lightning app page.

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

You may have a reference to my component here. Hope this is helpful.

Answer 5

I implemented an app "Unlock Global Header" to hide the global header on record pages.

Check it out: https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000HqGBiUAN