Removing title from top of page

[wes]

Hi,
I am creating a landing page and for some reason the page title is displaying at the top of this page.

I don’t want ‘Happy Holidays 2’ or the white bar to appear at the top. Can anyone advise?
Thanks!

[manish-sharma]

To eliminate the Shopify header, you have several options:

1. Shopify Admin Theme Editor: You can navigate to the Shopify admin theme editor and directly remove the header from there.

2. Builder Editor Options: Within the Builder editor, you can use the “Hide Header” and “Hide Footer” options available in the Options tab of the Page Fields. This provides a straightforward way to control the visibility of the header and footer.

3. Custom CSS Code: Alternatively, you can achieve this by utilizing custom CSS code. You can add your custom CSS code under the “Edit Content JS + CSS” section in the Builder editor.

.fRSPsc{
     display: none;
}

Choose the option that aligns best with your preferences and requirements. If you have any further questions or need assistance with any of these methods, feel free to reach out.

Thank you!

[wes]

Hi Manish,
Thanks for the quick reply. This option does work but when I switch on hide header and footer, it hides the entire navigation header and footer also. Is there a way to remove the page title but keep the header and footer navigation on?
Thanks,
Wes

[manish-sharma]

Hello @wes!

I’ve noticed that the title is not visible on your pages. To better assist you, could you please share the Builder content link or the live page where we can observe the title? Once we have this information, we can provide you with a custom CSS code specifically to hide only the header.

[wes]

Hi Manish,
It appears on the live page here: https://bionicgym.com/pages/happyholidays2

Builder content link: Builder.io: Visual Development Platform

[manish-sharma]

Hello @wes,

I see the header is only appearing on the live theme but not in the preview theme, to remove the header, you can use the below CSS code

#shopify-section-template--15842277720256__main .page-width--narrow{
    max-width: 100% !important;
    margin: 0;
    padding: 0; /* Remove white space above the header */
}

.section-header{
    display: none;  /* Hide the header */
}

Add the above code under the Edit Content JS + CSS section under the data tab.

Hope this helps!

[wes]

That worked perfectly. Thanks again for your help Manish, its much appreciated.