How to Hide Navigation Menu in WordPress Page

How to Hide Navigation Menu in WordPress Page

Assuming that you’re creating a new landing page for an ad campaign, and you don’t need a menu bar on the single page and want to hide? Or there may be another reason.

Then here, we will teach you how to hide navigation menu in WordPress page with and without using any plugin.

How to Hide Navigation Menu in WordPress Page

In this tutorial we will use three ways to completely hide the main menu or menu bar on a particular post or page.

Using Plugins: There are a lot of plugins in the WordPress directory specially developed to hide any menu on page.

Customizer: You can use the Gutenberg customizer option to hide menus on any post or page manually.

Coding: If you’re comfortable in coding then you can use then you can easily remove or hide a menu.

Method 1: Using Conditional Menus Plugin

In the first we are going to use the conditional menus‘ plugin created by Themify team. This plugin enables you to hide/show menus by using the conditions. This plugin is open source software and works on any wp theme, and it has got 70,000 plus active installations, so this plugin is safe to install.

To hide the nav bar, go and install the conditional menus plugin and activate it.

condtional menus

After installing the plugin, now go to the Apearance Menu Manage Locations.

Manage location

It will show all the menu names + conditions link, and it will show you the option to disable the menu, and click on it.

condtional menus disable

Now a new screen will appear, and it will show you the pages, posts, categories, taxonomies, etc. Choose the WordPress page or post you want to hide the secondary or primary menu and click the save button.

final step

After saving the setting, the selected page won’t display the navigation menu on any browsers.

Method 2: Gutenberg Customizer Option

If you’re using the Gutenberg WordPress editor, then you can easily show/hide the header on your page or post. In the Gutenberg editor there is no option to hide the primary or secondary menu. That’s why we are hiding the whole header layout which contains the menus.

To do it, go to the page or post you want to hide from the navigational menu and on the right side of the editor you will see the Disable settings option.

Select the Disable header and click update. And it will hide the header menu.

disable header

Using this method you can also hide the footer, sidebar, header, title and breadcrumb.

Method 3: Using Custom CSS

We recommend this method only if you’re well known with coding and if you’re not good with coding then we advise you to follow the above methods which are super-duper easy.

.postid-"enter your blog post id here" #secondary-navigation a {
display: none; !important

15678 is the post ID that we want to remove the secondary navigation menu.

Just put your blog post or page ID

Here is the method to find the ID for any post or page. Go to your page or post and right click and select View Page Source.

In this tutorial we are going to find the ID of this post:

view page source

A new page will open, press CTRL + F and type postid in the search bar, then it will highlight the post ID in the yellow color like this.

single post id

Copy the postid “15678” and enter it in the field.

.postid-15678 #secondary-navigation a {
display: none; !important

Now go to Appearance CustomizeAdditional CSS. And paste the above CSS code in the box and click Publish.

As you can see, the CSS code hides the secondary menu navigation bar.

secondary nav menu hidden

Congratulations, now you know how to hide the menu item on WordPress website.

How Do I Hide the Menu Bar in WordPress: Conclusion

We’ve shown you how to hide menu areas in WordPress in a simple way, and you can use this method to hide menus on specific pages using custom CSS or plugins.

Top navigation menus are very important for a good user experience. It will help your blog visitors to visit the areas that they are interested in quickly and easily. However, if you don’t want to display the top navigation menu on your blog, then we advise you to use one of the following methods:

  • Using WordPress plugin
  • Using Customizer Option
  • Using Custom CSS code.

More WordPress Guides

Related Posts

Photo of author

Abdullah Prem

I am Abdullah Prem from India, with over 10 years of experience in blogging. I happily work from home and teach people how to start blogging through my easy guides. I am an expert in writing about WordPress, Hosting, Themes, and online money-making ideas. I have been featured in popular tech sites like, Cloudways, Business2Community, Leadpages, GoodFirms, and ShareThis.

The tools I use on this blog

Cloudways: I am using this hosting on this blog. Try Cloudways

SEMrush: My all-in-one SEO tool to perform various SEO tasks. Try SEMrush

Generatepress: I use this theme on this blog, the super fastest theme. Try Generatepress

Omnisend: Using this email marketing tool, budget friendly. Try Ominisend

WP Rocket: I use this superfast cache plugin to increase my website loading speed within seconds. Try Wp Rocket

Elementor: I know nothing about coding, but I create beautiful websites. Try Elementor

Leave a Comment