Hide WordPress menu and header on individual pages

There are sometimes situations where you want to hide the WordPress menu and usually only want to hide the menu on a single page. Here you also have to differentiate whether you only want to hide the menu, i.e. the menu items, or also the complete WordPress header. That’s why I’m showing you here how it could possibly work.

The procedure depends very much on the WordPress WordPress 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... theme used, so not all of the following solutions may work.

Hide the WordPress menu on individual pages

Option 1: Hide menu via “global” CSS

Although this variant is a bit of a “quick and dirty” option, it is the simplest and most promising variant. You can hide your WordPress WordPress 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... 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:
.page-id-XXX header nav {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */
Add this 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 to your page. You can do this, for example, 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 style.css, you should use a child themeWhat 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.

Important: You have to replace the “XXX” in the 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 with the page id of the page on which you want to hide the menu.

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

How to find out the page-id

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

1. Go to the page on which you want to hide the menu.
2. Right-click on the background or a free 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 “

Option 2:

1. Go to the WordPress WordPress 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... edit mode of the page on which you want to hide the menu.
2. You will now 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 bar at the top of your browser. The page-id also appears after “post=XXX”.

Option 2: Hide menu via 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 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 for a specific page only. Visual Composer / WPBakery Page Builder and Elementor, for example, can do this.

Since the 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 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 insert 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 there:
header nav {display: none;}
If the code does not work, try this one:
header .nav {display: none;}

Option 3: Hide menu via PHP code

This option is by far the most difficult and also depends heavily on the theme you are using. However, 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 fetches and displays your WordPress WordPress 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... menu 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 specific page. The PHP PHP is a recursive acronym for "Hypertext Preprocessor". It is a scripting language that is comparable in some details to programming languages such as C or Perl. The most important area of application is the creation of dynamic web content. The script language is under an open source PHP license and is freely available for all common operating systems. You... code for this is something like:
<?php PHP is a recursive acronym for "Hypertext Preprocessor". It is a scripting language that is comparable in some details to programming languages such as C or Perl. The most important area of application is the creation of dynamic web content. The script language is under an open source PHP license and is freely available for all common operating systems. You...
if (!is_page(XXX)) {
wp_nav_menu(...);
}
?>

The XXX must be replaced by the page id.

The PHP PHP is a recursive acronym for "Hypertext Preprocessor". It is a scripting language that is comparable in some details to programming languages such as C or Perl. The most important area of application is the creation of dynamic web content. The script language is under an open source PHP license and is freely available for all common operating systems. You... 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 may be in a different place or a different PHP PHP is a recursive acronym for "Hypertext Preprocessor". It is a scripting language that is comparable in some details to programming languages such as C or Perl. The most important area of application is the creation of dynamic web content. The script language is under an open source PHP license and is freely available for all common operating systems. You... file. You may find the location in the header.php file. However, if you make changes to the theme files, you should use a child themeWhat 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, otherwise your changes will be overwritten with the next theme update.

Hide the complete WordPress header on individual pages

You can not only hide the menu, but of course also hide the entire WordPress WordPress 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 on individual pages. The header here refers to the entire 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 hiding the menu. Only the 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 you have to insert looks a little different.

The 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 for option 1 is:
.page-id-XXX header {display: none;}
/* Ersetze XXX durch die page id deiner speziellen Seite */

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

The 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 for option 2 is:
header {display: none;}

If the code does not work, try this one:
.header {display: none;}

If none of the above 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 . codes work, try adding “!important” after the “display:none”. So something like “…display:none !important;” (without quotation marks)

If you need more information on WordPress WordPress 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... menus, I’ve written an article on how to create and edit a WordPress menu.

Dieser Beitrag ist auch verfügbar auf: Deutsch (German)