WordPress Astra主题下隐藏指定页面导航菜单的CSS实现方法

Hey there! Let's sort out how to hide the navigation menu on all new pages of your Astra-powered WordPress site, while keeping it visible on your home page and blog page. Here's a straightforward approach:

How It Works #

Astra adds unique CSS classes to the <body> tag of every page. We can use these classes to target only the pages we want to hide the menu on, excluding your home and blog pages specifically.

Step 1: Add the Custom CSS #

Head to your WordPress dashboard, go to Appearance > Customize > Additional CSS, and paste this code:

/* Hide navigation menu on all pages except home and blog */
body:not(.home):not(.blog) .ast-header-wrap {
    display: none;
}

Breakdown of the Code #

• body:not(.home):not(.blog): This selector tells the browser to apply the rule to every page except those with the home class (your main page) and blog class (your blog page).
• .ast-header-wrap: This is the standard container class for Astra's header/navigation menu. If you've customized your header structure, right-click the menu and select "Inspect" to confirm the correct parent container class.

Alternative: Target Specific Page IDs (If Needed) #

If you only want to hide the menu on certain new pages instead of all non-home/non-blog pages, use page IDs instead. To find a page's ID:

1. Go to Pages > All Pages in your dashboard.
2. Hover over a page title—you'll see a URL snippet like post=123 where 123 is the page ID.

Use this CSS (replace XXX and YYY with your actual page IDs):

/* Hide navigation menu on specific pages */
body.page-id-XXX .ast-header-wrap,
body.page-id-YYY .ast-header-wrap {
    display: none;
}

Quick Tips #

• Don't forget to clear your site cache after adding the CSS to see the changes right away.
• If you're using a child theme, you can also add this code to your child theme's style.css file instead of the Customizer.

内容的提问来源于stack exchange，提问作者Whiefull