Menu above built with this plugin including Mega Menu.

Hiding the Menu on Specific Pages

There are two ways you can hide the menu on specific pages on your site and below we will go through both of these.

Method One: Using the Shortcode

The best way to achieve this is using the shortcode method. Unfortunately, this may not be possible for everyone as you may not have access to edit your template files. In addition, the thought of writing your own PHP code may seem daunting, but don’t fret! It really is quite simple.

The first step you need to do is to turn the Shortcode option on. This can be found under the Advanced tab, under the Technical tab and is labelled Use Shortcode?, as shown on this page. Just flip that on.

Once you have turned the Shortcode on, the menu will no longer show on your pages until you echo out the shortcode in your pages. To do this, you simply need to add the below piece of PHP code somewhere between your sites opening and closing body element.

<?php echo do_shortcode('[responsive_menu_pro]'); ?>

Most people will put this in the header.php or footer.php theme files so that it shows across all templates, rather than editing each individual page. Be careful when doing this however, that you don’t accidentally place the shortcode in the head section, or outside of the body.

Now that we know how to add the shortcode, let’s go about hiding it on specific pages which is actually pretty simple at this point.

You need to grab the ID of the page or pages that you want to hide and wrap the shortcode call in that, such as in the example snippet below:

<?php

if(!in_array(get_the_ID(), [15, 16, 17]))
   echo do_shortcode('[responsive_menu_pro]');

?>

The above example will now exclude the plugin from showing on any pages with the IDs 15, 16 or 17. All you need to do now, is enter your own page ID numbers and away you go.

Method Two: Hiding via CSS

The second method of hiding the menu is a lot simpler, however it will still leave the HTML output on the page which may or may not be a problem for you.

In either case, let’s pretend we want to hide the menu from pages 15, 16 and 17 again, you will need to add some CSS to the plugins Custom CSS option, which can be found under the Advanced tab, with the heading Custom CSS, as can be seen on this page.

Thankfully, as long as your theme is built to WordPress standards then each page has it’s own unique class placed on the body with the page ID, that we can use. For our pages, these classes would be postid-[ID] for posts and page-id-[ID] for pages.

For our example, let’s pretend that 16 is a page and 15 and 17 are custom post types, the below CSS is what you would need to add:

.page-id-16  #responsive-menu-pro-button,
.page-id-16  #responsive-menu-pro-container,
.postid-15  #responsive-menu-pro-button,
.postid-15  #responsive-menu-pro-container,
.postid-17  #responsive-menu-pro-button,
.postid-17  #responsive-menu-pro-container {
   display: none !important;
}
Responsive Menu Title Image
Responsive Menu
No coding knowledge needed