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.

enter image description here

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

enter image description here

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

enter image description here

  • Can you include more details like What component you have added in your home page? – sanket kumar May 2 '19 at 10:35
  • Please check.. I know for a fact that using css, we can remove the header.. But just don't know which standard class to refer.. – Brav May 2 '19 at 11:00
  • Can you paste minimal required code of your component by editing your question? – sanket kumar May 2 '19 at 11:19
  • I have not added any code from the LC as I don't think it is relevant. You can consider any component for Eg: a LC only showing a tabular list of sObjects. – Brav May 2 '19 at 11:30
  • 3
    Another option that you can do is to create a lightning component tab without creating a page through app builder, it wont add the section you are talking about – RedDevil May 2 '19 at 14:12

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

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

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.

| improve this answer | |
  • This is currently the best way to remove the header from "single-component" applications. Note that this will leave the developer to create any layout within the component. – stackasaur Dec 19 '19 at 20:57
  • Do lightening component tabs can receive params like lightning comp. apps? Because if not, it's a big consideration if to use this solution. – Yonathan Goriachnick Jan 9 at 14:37
  • Perfect - I should have used a Tab in the first place. – Jon Jan 30 at 16:46
  • Please note that "My Domain" has to be enabled for this to work. I found that out the hard way. (help.salesforce.com/…) – Robert Hyatt Feb 28 at 21:57
  • This is non starter. Using this approach you cannot add any list views or other stuff into your template... – dzh Mar 3 at 11:14

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"):

Before Style edit

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

slds-page-header style edited

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?


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!!

| improve this answer | |
  • Or, at least, slds-page-header is ONE of the classes involved here. – JoeTheSchmoe May 6 '19 at 15:08

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:

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:

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

That should be it!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.