Hide the Navigation Menu on Your WordPress Blog (Without Plugins)

There are two main ways to disable the navigation menu on your WordPress blog pages:

1. Using the Built-in Menu System:

This method works well if you only want to hide the menu on blog pages and not other parts of your website.

• Access the Menu Editor: Login to your WordPress dashboard and navigate to Appearance > Menus.
• Select the Menu: Choose the menu you want to modify from the “Select a menu to edit” dropdown.
• Menu Locations: Expand the “Menu Settings” section. Look for a checkbox or dropdown menu under the “Menu Locations” heading.
• Uncheck Blog Page: The option might be labeled “Primary Menu,” “Navigation Menu,” or something similar depending on your theme. Uncheck the box next to “Pages” or specifically “Blog” if the option exists.
• Save Menu: Click the “Save Menu” button to apply the changes.

2. Using a Custom CSS Code:

This method offers more flexibility but requires adding some code.

Access the Customizer: Go to Appearance > Customize.

• Find Additional CSS: Locate the “Additional CSS” section (placement might vary slightly based on the theme).
• Add CSS Code: Here, you can add CSS code to target the menu element and hide it on specific pages.

Here’s an example CSS code to hide the navigation menu on all blog pages:

body.is-blog .site-navigation {
  display: none;
}

Explanation:

• body.is-blog targets the entire body element when you’re viewing a blog page (WordPress adds this class to the body on blog pages).
• .site-navigation targets the main navigation menu element (class name might vary based on your theme).
• display: none; hides the targeted element (the menu).