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); */

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 '19 at 11:17

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.