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 WordPressWordPress does more than 38.8% of all websites on the internet. Yes - more than one in four websites you visit is likely powered by WordPress. • WordPress.org , often as self-hosted WordPress is the free open source WordPress software that you can install on your own web host to create a 100% custom website.• WordPress.com is a for-profit, paid... 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 CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . 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
What is a Child Theme? A Child Theme is an active Theme in WordPress Appearance>Themes that has a line of code to tell WordPress to also use the specified parent Theme (installed but not activated) in WordPress Appearance>Themes. It is the method of making customizations to your Theme but still being able to accept updates from your original Theme developer.... mehr erfahren 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:
- Go to the page on which you want to hide the menu.
- Right click on the background or an empty space on the page and click on “Examine Element” or “Element Information”.
- 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:
- Go to the WordPress edit mode of your site on which you want to hide the menu.
- Here you will find the URLA Uniform Resource Locator identifies and locates a resource, for example a website, via the access method to be used and the location of the resource in computer networks. 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
<?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 .
