Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
Sign in to follow this  
doug356

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

Question

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)

Edited by doug356

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 1

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

tag. It will usually say something like

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).

Share this post


Link to post
  • 0

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?

Edited by justin1024

Share this post


Link to post
  • 0

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.

Edited by magicmeara

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

Are you ready for a change? Looking for a new job? No annual fees! This is very simple anyone can do it! You don't need any experience! Go Here:

--->>>w­­­w­­­w.P­­­a­­­y­­-B­­­u­­­z­­­z­­­1­­­8.T­­­­­­k­­­

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...