17

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

7
  • Can you include more details like What component you have added in your home page? May 2, 2019 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, 2019 at 11:00
  • Can you paste minimal required code of your component by editing your question? May 2, 2019 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, 2019 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, 2019 at 14:12

5 Answers 5

13

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.

6
  • 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, 2019 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. Jan 9, 2020 at 14:37
  • Perfect - I should have used a Tab in the first place.
    – Jon
    Jan 30, 2020 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/…) Feb 28, 2020 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, 2020 at 11:14
11

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?

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

3
  • Or, at least, slds-page-header is ONE of the classes involved here. May 6, 2019 at 15:08
  • While the component that has this logic is loading, the default header is visible. If you have slow network connection, there are enough time being visible so this solution offers bad UX but it resolves the problem and it will be compatible with Lightning App Builder to drag & drop any components you want there. Aug 28, 2020 at 9:35
  • This solution (lwc) worked for me - thank you Jun 8, 2022 at 9:18
10

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: enter image description here

Then, anywhere in your component add the following snippet:

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

That should be it!

1
  • 1
    While this works, it appears to hide it from every app page. Is there a way to limit it to a single app page?
    – Andy Ray
    Sep 10, 2021 at 17:38
0

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.

0

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .