How can I add a custom navigation menu to a single page?

hello answers forum -

My goal is to create additional navigation menus which appear only on specific pages.

I would prefer to do this in regular mode (what do you call non-developer mode?), but have seen nothing to indicate that is possible. So, I have created a developer account and am pursuing that route.

Starting with Wells template (no particular reason), I was able to add a menu by modifying the template.conf file.

"navigations" : [ {
"title" : "Main Navigation",
"name" : "mainNav"
} , {
"title" : "Secondary Navigation",
"name" : "secondaryNav"
}, {
"title" : "Subpage Navigation",
"name" : "subpageNav"
}]

This shows "Subpage Navigation" menu in the Content Manager. I am able to add pages, galleries etc. Good so far.

I'm flying a little blind, because I don't understand most of what I see at http://developers.squarespace.com/ and my understanding is there is no support provided. A few concrete examples would be great, if anyone knows where to find them. But I digress...

So, via trial and error I got my new menu to show on every page via site.region file:

        <div id="topNav">
     <nav id="mainNavigation" class="main-nav dropdown-click desktop-nav">
       <squarespace:navigation navigationId="mainNav" template="navigation" />
     </nav>

     <nav id="secondaryNavigation" class="main-nav dropdown-click desktop-nav">
       <squarespace:navigation navigationId="secondaryNav" template="navigation" />
     </nav>
     <!-- my added menu -->
     <nav id="subpageNavigation" class="main-nav dropdown-click desktop-nav">
       <squarespace:navigation navigationId="subpageNav" template="navigation" />
     </nav>
   </div>

The big question is:

How / where can I add code that will add menu/s based on current page ID?

eg. I want the Cats page to include the cats-navigation-menu, I want Dogs page to include dogs-navigation-menu. I don't want Dogs page to include cats-navigation-menu.

Like...
if page id == dogs page id ... add dogs-menu code ... end if if page id == dogs page id ... add cats-menu code ... end if

Thanks for any help with this.
-- Doug (356)

First you have to get the body ID of the page you want (i.e your cat page) your new navigation to show up on. You can do this by looking at the page source and finding the

Copy that body ID and go to your LESS file.

You don't want the subpageNavigation to show up on every page.

#subpageNavigation { display:none;}

But you want it to show up on the cat page:

#collection-1082397698201 #subpageNavigation { display: block; }

What's happening here is basically telling your browser that in most cases, hide this navigation menu, except on the cat page (#collection-1082397698201).

Thanks Angelo. Clear and succinct explanation. And it worked perfectly.

So if I have numerous pages on which I want that subpageNavigation to display, I would do something like...

 #collection-1234567 #subpageNavigation, #collection-89101112 #subpageNavigation { display: block; }

... including all the pages I need it to show on?

Yes that is correct. Wish it was simpler :)

Did you add the code below to the 'global.less' file?It doesn't seem to be working for me.

#subpageNavigation { 
display:none; 
}
#collection-1082397698201 #subpageNavigation { 
display: block; 
}

Also added the div code above to the 'navigation.block' file, as it would not let me add it to my 'site.region' file.

Any insight would be greatly appreciated! Thanks in advance.

Hey Magicmeara,

Your collection-id is different from the original poster's collection (it won't be 1082397698201 ). If you re-read my answer, you can find your actual collection id in the Body tag of your page.

Hope that helps!

Are you out there @angelocordon? I've been trying to above solution and was able to create a subpageNav but for the life of me cannot get it to show up when I hide my mainNav. Somehow they are tethered together and I can't figure it out. Please help! www.highlandpantry.com