Hide Page Title

Pages are perfect for static content that has lasting relevance or only needs occasional updates.

In this tutorial, you will learn how to hide the title of your Pages for your web app, mobile app, or both. This is particularly useful if you have used the same title text when creating a Hero Image widget or headings on the same page and want to avoid repeating the title. The text in the Hero Image widget and headings can be more effective in capturing the readers' attention than using it as the page title.

On completing this tutorial, you will be familiar with the CSS selectors required to hide the title of your Pages.

• You have added a Page
• You are an administrator in the Staffbase Studio.

1. In the Studio, navigate to the Settings > Branding.
   The Branding page opens.
2. Under Custom Styling, click Adjust the styling of your app.
   The Custom Styling editor opens.
3. In the editor, copy and paste the following CSS lines.

   /* =============================================================================
    = HIDE DESKTOP PAGE TITLE ======================================================
    ================================================================================ */

    .desktop .app-header .page-header-wrapper .header-container .header-body .header-title {
       display: none; 
    }

4. Click Preview to test your CSS customizations.
5. Click Save.

You have hidden the title of Pages in the web app.

1. In the Studio, navigate to the Settings > Branding.
   The Branding page opens.
2. Under Custom Styling, click Adjust the styling of your app.
   The Custom Styling editor opens.
3. In the editor, copy and paste the following CSS lines.

   /* =============================================================================
    = HIDE MOBILE PAGE TITLE =======================================================
    ================================================================================ */

    .mobile .header-title {
       display: none; 
    }

4. Click Preview to test your CSS customizations.
5. Click Save.
   You have hidden the title of Pages in the mobile app.

1. In the Studio, navigate to the Settings > Branding.
   The Branding page opens.
2. Under Custom Styling, click Adjust the styling of your app.
   The Custom Styling editor opens.
3. In the editor, copy and paste the following CSS lines.

   /* =============================================================================
    = HIDE MOBILE & DESKTOP PAGE TITLE =============================================
    ================================================================================ */

    .header-title {
       display: none !important; 
    }

4. Click Preview to test your CSS customizations.
5. Click Save.
   You have hidden the title of Pages in both web and mobile app.

You have learned how to hide the title of Pages.