Secondary Menu on select pages

This topic has 7 replies, 3 voices, and was last updated 8 years, 10 months ago by wensolutions.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 10, 2016 at 4:27 am #85055

Kyle
Member

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?

February 10, 2016 at 1:39 pm #85081
Nilambar Sharma
Participant
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!
February 10, 2016 at 1:46 pm #85084

Kyle
Member

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?

February 11, 2016 at 8:52 pm #85222

wensolutions
Participant

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!

February 13, 2016 at 1:15 am #85295
Kyle
Member
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 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
February 13, 2016 at 8:48 pm #85350
wensolutions
Participant
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
February 17, 2016 at 11:13 pm #85677

Kyle
Member

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

February 17, 2016 at 11:26 pm #85678

wensolutions
Participant

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