+ Start a Discussion

Modify slds-page-header in Salesforce Mobil


I've managed to create a custom page for salesforce mobile through the lightning app builder. However,when naming the app page, for example My Salesforce, is there a way to hide this header part using the display:none syntax? If so, where could I hide this header using css? 

User-added image
Raj VakatiRaj Vakati
This is interesting .. I can suggest some hack but I haven’t tried  
  1. Create a new lighting component without any body
  2. Include this component in your app page .
  3. Try to remove the .slds_page_header style of the page load or set css to display none
Hi Rajamohan, I had tried that before, placing it in the css component but it didn’t work. .THIS .slds_page_header { display:none }
Raj VakatiRaj Vakati
try this
THIS .slds_page_header { display:none!important  }

No that doesn’t work, or any of these. .THIS .slds_page_header { display:none!important; } .THIS .slds-page-header { display:none!important; } } .THIS .flexipageHeader .slds-page-header .uiBlock .oneAnchorHeader { display:none!important; } I believe the custom component page is separate from the salesforce app builder part.
SatyaP SahaneeSatyaP Sahanee
JH_Neo ,  

As you have mentioned the page Header part is a separate part , so we have to include the external CSS , in the componenet .

Create a  CSS file with :

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

After this add this css to you r component using ltng:require
<ltng:require styles="{!$Resource.slds_page_header_hide}" />

Additionally, you may want to make it more specific. I used SatyaP solution, but then other headers were being hidden, after viewing the page with the custom CSS. So, changing the CSS to this, worked for me:
header.flexipageHeader.slds-page-header.uiBlock.oneAnchorHeader { 
    display: none;