Hide Page Title

Learn how to hide the title of your Pages with custom CSS.

Employee App
Front Door Intranet

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.

Hiding the title of Pages does not impact the breadcrumb navigation.

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

Using custom CSS should be approached with caution. Apply styles only if you have experience with CSS, and always preview the changes.

  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;
    }
  1. Click Preview to test your CSS customizations.
  2. 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;
    }
  1. Click Preview to test your CSS customizations.
  2. 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;
    }
  1. Click Preview to test your CSS customizations.
  2. 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.