3 Ways to Hide Your Site Header in GeneratePress Theme (Free + Premium!)

If you’re building a landing page or any page where you want to hide the site header, I’m going to show you three different ways to do it using GeneratePress, both the free and premium versions. This can be particularly useful if you’re directing traffic to a page from an ad campaign and want to keep visitors focused on the content without distractions from the main site navigation.

Method 1: Hiding the Header with GeneratePress Free

If you’re using the free version of GeneratePress, you can still hide the header on a specific page with a little custom CSS. Here’s how:

1. Find the Page ID: First, go to the page you want to hide the header on. Look at the URL in your browser. You’ll see something like post=144. The number after post= is your page ID. For example, in this case, the ID is 144.
2. Add Custom CSS: Next, go to your WordPress dashboard and navigate to Appearance > Customize > Additional CSS. Add the following CSS:
   .page-id-144 .site-header {display: none;}
   Replace 144 with your actual page ID. Once you save and publish, you’ll notice that the header disappears on that specific page.
3. Test It: Navigate to another page to ensure the header is only hidden on the targeted page. If everything looks good, you’re all set!

Method 2: Hiding the Header with GeneratePress Premium Using Elements

If you have GeneratePress Premium, hiding the header becomes even easier using the Elements feature.

1. Enable Elements: First, make sure the Elements module is activated. Go to Appearance > GeneratePress > Elements and activate the module if it isn’t already.
2. Create a New Element: Go to Appearance > Elements and click Add New Element. Choose Layout as the type.
3. Disable the Header: Title the element something like “Hide Header,” then go to the Disable Elements tab and check the box for Site Header.
4. Set Display Rules: In the Display Rules tab, set the location to Front Page or whatever page you want to hide the header on. Then hit Publish.Test It: Visit the page you targeted, and you’ll see that the header is now hidden.

Method 3: Hiding the Header with GeneratePress Premium Using Disable Elements

Another method available with GeneratePress Premium is to use the Disable Elements feature directly on the page itself.

1. Enable Disable Elements: Ensure the Disable Elements module is activated. Go to Appearance > GeneratePress > Modules and activate it if necessary.
2. Edit the Page: Go to the page where you want to hide the header. Scroll down to the Disable Elements section in the sidebar.
3. Disable the Header: Check the box for Header and then click Update.Test It: Refresh the page, and you’ll see that the header is now hidden.

Conclusion

All three methods are effective ways to hide the header in GeneratePress, depending on whether you’re using the free or premium version. While the CSS method is a great solution for free users, GeneratePress Premium offers more flexibility and ease with just a few clicks. No matter which method you choose, you’ll be able to keep visitors focused on your landing pages or special content without distractions from the main site navigation.