Hide WordPress menu and header on individual pages

Sometimes there is the situation where you want to hide the WordPress menu and usually even want to hide the menu on a single page. Here you also have to distinguish whether you only want to hide the menu, i.e. the menu items, or the entire WordPress header. That’s why I’m going to show you here how it might work.

The procedure depends very much on the WordPress theme used, so all of the following suggested solutions may not work.

Hide the WordPress menu on individual pages

Option 1: Hide menu using “global” CSS

This variant is a bit of the “quick and dirty” variant, but the simplest and most promising variant. You can hide your WordPress menu with the following CSS code: So insert this CSS code into your page. You can do this in the customizer under “additional CSS”, the theme options (if your theme has theme options) or in your style.css file. If you enter the code in the style.css, you should use a child theme and its style.css file.
.page-id-XXX header nav {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */

Important: You have to replace the “XXX” in the CSS code with your page id of the page on which you want to hide the menu.

If the code doesn’t work, try this:
.page-id-XXX header .nav {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */

This is how you can find out the page-id

There are two ways to find out the page-id.
Possibility Number 1:

  1. Go to the page on which you want to hide the menu.
  2. Right click on the background or an empty space on the page and click on “Examine Element” or “Element Information”.
  3. A window with the HTML code should now open. Search there for “<body”. There you will find the page-id-XXX at class = “…”

Option 2:

  1. Go to the WordPress edit mode of your site on which you want to hide the menu.
  2. Here you will find the URL in the address line of your browser at the top. There is also the page id after “post = XXX”.

Option 2: Hide menu using page-specific CSS

This option is not quite as “dirty” as the 1st option. Some themes or page builders offer the option of entering and displaying CSS code for a specific page only . The Visual Composer / WPBakery Page Builder and the Elementor can do that for example.

Since the CSS code is then only executed on this one page anyway, it has the advantage that you don’t have to work with the page ids, as in option 1. So add the following CSS code there:
header nav {display: none;}
If the code doesn’t work, try this:
header .nav {display: none;}

Option 3: Hide the menu using PHP code

This option is by far the most difficult and also depends a lot on the theme you are using. But this would be the “cleanest” method, because your menu is not only hidden, but does not even end up in the HTML source code.

With this method, the command wp_nav_menu(...), which your WordPress menu gets and outputs in the theme, is packed into a conditional statement (if statement). Then the menu is only displayed if the page id does not correspond to your particular page. The PHP code for this is something like:
<?php
if (!is_page(XXX)) {
wp_nav_menu(...);
}
?>

The XXX must be replaced by the page id.

The PHP code or the if statement around the wp_nav_menu command must be placed where your theme calls the wp_nav_menu command. Depending on the theme, this can be in a different position or in a different PHP file. You may find the location in the header.php file. If you make changes to the theme files, you should use a child theme, otherwise your changes will be overwritten with the next theme update.

Hide the entire WordPress header on individual pages

Not only can you hide the menu, but of course you can also hide the entire WordPress header on individual pages. The header here means the whole bar in which the menu is located, including the part where the logo, etc. is displayed.

To hide the header on individual pages, you basically have to use the same options 1 and 2 as for the hide menu. Only the CSS code that you have to insert looks a bit different.

The CSS code for option 1 is:
.page-id-XXX header {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */

If the code doesn’t work, try this:
.page-id-XXX .header {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */

The CSS code for option 2 is:
header {display: none;}

If the code doesn’t work, try this:
.header {display: none;}

If none of the mentioned CSS codes work, try to write a “! Important” after the “display: none”. So something like “… display: none! Important;” (without quotation marks)

If you need more information about WordPress menus, I wrote an article on how to create and edit a WordPress menu .

Was this article helpful?

Related Articles

Werbung