I want to hide a page header from an appHomeTemplate I have looked at several similar questions but none of them give an answer.

I have used .THIS.slds-page-header { display: none; } in my page template but this does not seem to work. If I use inspect and add display none this hides the header. Using this in the Style section this does not work as: .THIS.slds-page-header { display: none; } what am I missing?

.slds-page-header {
    display: none;
    /* padding: 1rem 1rem; */
    /* border-bottom: 1px solid rgb(221, 219, 218); */
    /* border-radius: .25rem; */
    /* background: rgb(243, 242, 242); */
    /* background-clip: padding-box; */
    /* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10); */
    /* border: 1px solid rgb(221, 219, 218); */

1 Answer 1


For those who bump into this I solved this the following way:

The page Header part is a separate part, so we have to include an external CSS, in the component.

Create a CSS file with :


then Add this css file as a static resource.Name : (slds_page_header_hide)

Add the css to the component using ltng:require

<ltng:require styles="{!$Resource.slds_page_header_hide}" />
  • 1
    Just note that this may break at any time if SF decide to change their templates. Also, for me if i use AURA, in App Page there are no headers (not sure about Home page, not tried it)
    – zaitsman
    Jun 17, 2019 at 11:17

You must log in to answer this question.

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