Symptoms

After customizing the Service Portal's header either through the sp_header_footer record or via the Service Portal branding editor, the Service Portal header may not show the expected changes when viewed through the mobile app.

Release

All

Environment

ServiceNow Mobile App

Cause

There is a separate CSS specifically for the navbar when viewed through the Mobile App

Resolution

The solution here is to make sure that the CSS for the navbar on the Mobile App is also configured which can be done via the following steps:

1. Navigate to the header record for the Portal. A list can be found at:
   https://<your-instance>.service-now.com/sp_header_footer_list.do
2. Once you have the appropriate header record opened, locate the CSS field
3. In the CSS field, locate the following code:
   
   
   /* for mobile app */
   .navbar-inverse.is-native {
     background-color: #405060;
   }
4. Edit the background-color to the desired color
5. Save