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 Settings > App and Intranet.

2. Under Custom CSS, click and hold Show Editor until the editor opens.

3. In the editor, copy and paste the CSS snippet.

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

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

4. Click Save.

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

1. In the Studio, navigate to Settings > App and Intranet.

2. Under Custom CSS, click and hold Show Editor until the editor opens.

3. In the editor, copy and paste the CSS snippet.

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

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

4. Click Save.
   You have hidden the title of Pages in the mobile app.

1. In the Studio, navigate to Settings > App and Intranet.

2. Under Custom CSS, click and hold Show Editor until the editor opens.

3. In the editor, copy and paste the CSS snippet.

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

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

4. 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.