Each page is assigned a unique number by WordPress called the post ID (although it’s sometimes referred to as the page ID, because pages and posts are essentially the same, except pages aren’t displayed on a blog page). To see what the page ID is, you can either do a “view source” on the page and look for the body element, or you can open the page in the page editor, and up in the address bar will be something that looks like post=161. The 161 in this example is the post ID. This post ID allows you to target your CSS to specific pages, because each page will have a class called page-id-### (where ### is the post ID) assigned to the body element.
So what I would do is first create custom menus for each submenu by going to Appearance > Menus. This is also where you should have gone to create your main menu.
Then add a Custom Menu widget to the sidebar for each custom menu that you created and set it to use one of the custom menus that you created in the previous step.
Now, you have to write a CSS rule that will hide all of the Custom Menu widgets by default, then write separate CSS rules that display a specific widget when the page for that widget is active. Since you haven’t created a child theme, you would add the CSS rules using a CSS plugin like Jetpack or Custom CSS Manager.
Let’s work on the rules for displaying the separate Custom Menus first. You should have the custom menu widgets all on your sidebar so you can inspect them. WordPress will assign each Custom Menu widget a unique ID that looks like nav_menu-##, where ## is a number. To find out what that number is, open your site using Chrome, because Chrome has a web debugging tool built-in called Chrome Developer Tools. Then right-click on one of the custom menu titles and select Inspect element from the pop-up menu. Chrome DevTools will open up at the bottom of your browser. On the left pane will be a document inspector pane, which shows the structure of the page. On the right will be all of the CSS rules which affect the line that is currently high-lighted on the left pane.
On the left pane, the line which is highlighted should look like this:
<h3 class="widget-title">About</h3>
In this example, I’m inspecting the title of a Custom Menu widget which I gave the title About.
If you look at the line above that, you should see a line that looks like this:
<aside id="nav_menu-10" class="widget widget_nav_menu">
This line is the “container” which holds this particular Custom Menu widget. What you want to focus on is the value for id, which in this example is nav_menu-10. This is the unique identifier which identifies this specific Custom Menu widget. So the ID for the About custom menu widget (in this example) is nav_menu-10.
Now all you have to do is create a rule which matches the Custom Menu widget to the page in which it is to be displayed. Remember from before that each page has a class name which is comprised of a unique post ID, and now you know that each Custom Menu widget has its own unique ID. Let’s say your About page has a class of page-id-161 and the custom menu widget has an ID of nav_menu-10. Then you would write a rule which looks like this:
.page-id-161 #nav_menu-10 {
display: block;
}
What this rule says is that for the element which has an ID of nav_menu-10, which is contained within an element that has a class of page-id-161, display it as a block. The phrase .page-id-161 #nav_menu-10 is called a selector, because it selects which elements are affected by the rule. You can add other selectors to the same rule, if the properties within the braces are to be applied the same way. So let’s say you have a page called Graduate Courses, and the post ID is 89, and you’ve created a Custom Menu widget for it which has an ID of nav_menu-11. Then you can add another selector to the above rule so that the rule now looks like this:
.page-id-161 #nav_menu-10,
.page-id-89 #nav_menu-11 {
display: block;
}
This is the key to allowing each Custom Menu widget to be displayed only on the page that you want. Note that selectors are separated with a comma, but don’t add a comma after the last selector or you’ll create a syntax error.
Last thing to do is to add the rule which hides all of the Custom menu widgets by default:
.widget_nav_menu {
display: none;
}
All of the Custom Men widgets have a class called .widget_nav_menu, so this one rule will hide all of them.
