[Kyle]

I am trying to use the secondary menu so that on specific pages they only show the secondary menu and hide the primary menu. How do I go about making this happen?

[Nilambar Sharma]

Hello @kyle,
Currently this feature is not available in the theme. However, that can be achieved via some custom css as a temporary and quick fix.
Suppose if the id of the pages where you want to hide the primary menu are 10 and 11 respectively, then you have to add the css in the Customizing > Themes Options > Advanced Options > Custom CSS

.page.page-id-10 #site-navigation,
.page.page-id-11 #site-navigation
{
    display: none;
}

Hope that helps resolving the issue.

Thanks!

[Kyle]

Thanks for the help on hiding the primary menu. Using the CSS, if I want to just show the secondary menu while the primary is hiding on that specific page, what would that display: ; code be?

[wensolutions]

Hello @Kyle,
Have you tried that code ?. It seems that your earlier and the latest request are same one, i.e. to hide primary menu and just show the secondary one on certain pages. Yes, the above CSS code does the same. You just need to grab and put the page ids as I’ve shown in the above example. This will show the secondary menu only and hide the primary menu on the pages whose ids will be mentioned in the above CSS code.

Please elaborate this if I have misunderstood it.

Thanks,
Regards!

[Kyle]

I did input that code and it hid the primary menu on the 1 page that I wanted to hide it on.

What I am trying to accomplish with this is the following:

I do not want to show the secondary menu on the rest of the site
I only want to show the secondary menu on one page where I am hiding the primary menu

I have been able to hide the primary on that one page
Now I just need to show the secondary menu on just that one page

I hope that helps to better explain what I am trying to accomplish. I am close to that need, I just wasn’t sure what the display tag would be to show that secondary menu

[wensolutions]

Hello Kyle,

Thank you for explaining your requirement in detail. Please ignore the above steps and follow the latest one.

Step I:

First make sure you uncheck ‘Disable Secondary Menu’ option through Appearance -> Customize->Navigation.

Step II :

Hide secondary menu entirely in your site through custom CSS code.

.page.page-id-501 #site-navigation
{
    display: none;
}

Step III :

Now display secondary menu on specific page by passing its page ID (numeric value) as shown below.

If your page ID is 501 then code would be :

.page.page-id-501 #secondary-navigation {
    display: block;
}

This means primary menu now need to be hide on this same page with ID 501. So paste following code right below the above CSS codes

.page.page-id-501 #site-navigation
{
    display: none;
}

In sum up:

If let’s say you have 3 pages with ID randomly 501,603 and 789 then cumulative custom CSS would be :

 /* show secondary */

 .page.page-id-501 #secondary-navigation, .page.page-id-603 #secondary-navigation, .page.page-id-789 #secondary-navigation  {
    display: block;
}

/* hide primary */
.page.page-id-501 #site-navigation, .page.page-id-603 #site-navigation, .page.page-id-789 #site-navigation, 
{
    display: none;
}

Hope this helps ! Kindly let us know if you have any problem in understanding and implementing above steps.

Thanks

[Kyle]

So this code is successful at hiding the primary navigation and showing the secondary navigation that I want on the one specific page.

The problem is that the code:
.page.page-id-501 #site-navigation
{
display: none;
}

is not hiding the secondary navigation on all the remaining pages on our site. I could go in and add line of code for each page to hide the secondary menu but that is tedious and I don’t want to have to do that every time we add a new page

[wensolutions]

Hello Kyle, yes this approach looks quite mundane through custom CSS approach that we also realize.

But yet there is another approach in which one custom check option can be added on
each page editor screen so to give a choice to display conditional menu for that particular page. This is completely a programmatical approach of customizing a theme to add this feature.

You can consider Hiring a Customizer to complete this job safely for you.

Hope you will decide on that.

[Author]

Posts