Hayden: Adding Dropdown Navigation for Pages Within an Index

I've created a website using the Hayden template and I would like to add a dropdown navigation to the main menu so that users can quickly navigate to a specific section within an index from the menu. Right now, the theme only supports the top level index page to appear within the main navigation, and I would like to be able to reveal the sections within the index in a dropdown menu upon hover. This would likely involve creating anchor tags for the different sections and then referencing them in the dropdown menu, but I'm not sure what code I need to inject in order to achieve this, and how to do it without breaking the navigation for tablet and mobile.

I've seen others attempt to do this by creating folders and then referencing the index sections as a page within a folder, but this doesn't achieve the effect I'm looking for because, if a user clicks on the section within the dropdown navigation, it will only reveal that particular section and the user cannot scroll up or down to view the other sections. Does this make sense? In short, what I'm looking to do is to create dropdown menu navigation for the sections within an index using anchor tags.

Any suggestions and coding wisdom are welcome!! Thanks!

Did you manage to find a solution to this?

Have you tried using link pages in a folder?I can explain this, but don't want to waste time if you've already tried it

Yes, it's a great work-around, amd that is what i did in the end. but i still have a problem : the title in the navigation (the folder's name) doesn't show up as "active" (i.e. as a differnt color) — and it's obvious it wouldn't. i imagine there's probably a code i could inject in the index page to make it change color. But i'm not much for hand-coding. Any ideas of something i could try?here's the website i'm building : https://margarines-thibault.squarespace.com/thanks for your follow-up ^_^cheers

Hi there. I understand that it is your website, so you want it to look a specific way, but just as an FYI, in modern web design, on a navigation menu, you generally don't want the link-active action to take over.That's considered kind of dated in the web world. The logic is that people are aware now that as soon as they hover over the nav, it will show as active (like the way your text color changes on hover). Also, most browsers show the annoying line under links whick ruins the elegant part of the design.However, you can go into your DESIGN--->STYLE EDITOR then play around with the colors to make them pop a little more. The gray color on your site is pretty passive. There are options to change those colors, etc. under the navigation tab.hope this helps.-m

Hi purpleman

Thanks for the advice, it's welcomed, including visual tips.However, just to make sure you understand my question: i'm not looking to make the title change color with a hover, but when i'm on that particular page, exactly the way it does in this squarespace answers page (for instance, questions in highlighted, while tags, users, badges and unanswered are darker). Now, since the title in my nav is merely a link, it doesn't highlight when i'm visiting that page. (in my case, the page i'm talking of is the products page.) any thoughts or cues on that?

Hi purpleman

Thanks for the advice, it's welcomed, including visual tips.However, just to make sure you understand my question: i'm not looking to make the title change color with a hover, but when i'm on that particular page, exactly the way it does in this squarespace answers page (for instance, questions in highlighted, while tags, users, badges and unanswered are darker). Now, since the title in my nav is merely a link, it doesn't highlight when i'm visiting that page. (in my case, the page i'm talking of is the products page.) any thoughts or cues on that?

Hi purpleman

Thanks for the advice, it's welcomed, including visual tips.However, just to make sure you understand my question: i'm not looking to make the title change color with a hover, but when i'm on that particular page, exactly the way it does in this squarespace answers page (for instance, questions in highlighted, while tags, users, badges and unanswered are darker). Now, since the title in my nav is merely a link, it doesn't highlight when i'm visiting that page. (in my case, the page i'm talking of is the products page.) any thoughts or cues on that?

Hi purpleman

Thanks for the advice, it's welcomed, including visual tips.However, just to make sure you understand my question: i'm not looking to make the title change color with a hover, but when i'm on that particular page, exactly the way it does in this squarespace answers page (for instance, questions in highlighted, while tags, users, badges and unanswered are darker). Now, since the title in my nav is merely a link, it doesn't highlight when i'm visiting that page. (in my case, the page i'm talking of is the products page.) any thoughts or cues on that?

Ahhh. Now I see. To do that, you'd need to to create separate pages for your categories.Right now it just scrolls down the same page, so I'm sure it's messing with the css/html.But,If you break off those categories into separate distinct pages, then put those in a folder titled OUR PRODUCTS it will do that. I actually think it'd endup looking a bit more tidy that way. I'm always a fan of minimalist building though.The scrolling background pics you have are cool, but you might have to simplify to get the effects you'd like.Here's my site, done on bedfored: http://www.wrenandcuff.com/site/the-stompboxes

Hi, I'm new to forums, so I'm sorry if I do anything dumb... but I was looking for a similar solution I believe. I am using the Marquee template, with Index pages, and sub pages in those indexes, to get the scrolling display. I would like to have the navigation hold these sub pages, so that every page is one click away. Is this possible?

Should I post this here or as a new thread?

Site is still FAR from finished, but for reference... https://marc-therrien-h871.squarespace.com

Thanks for any help!

Hi, I'm new to forums, so I'm sorry if I do anything dumb... but I was looking for a similar solution I believe. I am using the Marquee template, with Index pages, and sub pages in those indexes, to get the scrolling display. I would like to have the navigation hold these sub pages, so that every page is one click away. Is this possible?

Should I post this here or as a new thread?

Site is still FAR from finished, but for reference... https://marc-therrien-h871.squarespace.com

Thanks for any help!

Hello, i'm looking to achieve the same dropdown menu as you, i already have the dropdown with the index but I do not know how to make it, once you click, scroll to the desired page inside the index instead of just appear in it.

How did you manage to achieve this? Some coding?

Sorry to bother you and thanks!

FredericG and purpleman,

I am trying to do the exact same thing on my website, I am using the Hayden template and I want to create drop-down menus in the navigation that points to a specific section on an index (same page). I took a look into your site https://margarines-thibault.squarespace.com/#margarines and it's doing the exact thing that I want. Would you please kindly explain to me how to do this? Can you elaborate more on using 'link pages in a folder'? I really need the solution soon and I would really appreciate your help!

FredericG and purpleman,

I am trying to do the exact same thing on my website, I am using the Hayden template and I want to create drop-down menus in the navigation that points to a specific section on an index (same page). I took a look into your site https://margarines-thibault.squarespace.com/#margarines and it's doing the exact thing that I want. Would you please kindly explain to me how to do this? Can you elaborate more on using 'link pages in a folder'? I really need the solution soon and I would really appreciate your help!

Hi Shabrinank

i'll try to be as limpid as possible. sorry if i sound like an elementary school teacher :P

The drop-down menu was made this way :

• Create a folder page for each title in the nav bar
• the contents of the folders are all links (in the index : add page > link)
• the links are named according to what you need in the menu
• they link to unlinked pages, organized within unlinked indexes (in the unlinked section)
• the links are all anchors within the right index (for instance : /apropos#mission)

now all that's missing is a line of code so the title in the nav is darkened when you are on a page. i could post this (if needed) once my programmer has made the code for me ^_^

hope this helps, cheers

.f

This has been VERY helpful! I'm just stuck on the last step. I don't think I'm understanding what to do to set up these anchors. Right now the link pages are simply linking to the pages on their own (not the section within the index). Any advice you can offer would be greatly appreciated!

Thanks,Joe

Im was in the same position as JCamden.The last bullet point is very unclear...

Follow this article on Creating anchor links.

Hello,I have gotten the sub links in the drop down menu to work however the main title of the navigation menu doesn't go through to the top of the index page they click through to the first page or link under the drop down menu. @fredericG how did you achieve this effect in your site?Thank you,Gavin

Hello,I have gotten the sub links in the drop down menu to work however the main title of the navigation menu doesn't go through to the top of the index page they click through to the first page or link under the drop down menu. @fredericG how did you achieve this effect in your site?Thank you,Gavin

also, when clicked on the last link in the index is linked slightly lower than the rest and the title of the section is covered up by the navigation header, the others do not have this problem and the exact same code was placed for all of them.my site link is gavin-ostertag.squarespace.comthank you

Hi fredericG,

Was wondering how you made the navigation title display the entire index page that you set up in the unlinked pages.

I followed steps 1-4, but could get what you mean by anchors to the right index. I linked the link pages (under the folder) to the unlinked pages in the unlinked index page alright, but couldn't get the main navigation title (folder title) to display the scrolling index page. Can you let me know what I'm missing?

I'm after the same effect that you did with your https://margarines-thibault.squarespace.com/produits/#supermarche

Hi I see the best answer, and can someone explain in detail the bullet points? I am not understanding (in the index add page > link)?

@JCamden @dc_marshall @PVNZ Sorry if this comes late. It might help others who stumble upon this:Making anchor link (last bullet point):Once you're done with steps 1 through 4 : - Go back to your Folder in the linked section - Click on the + below to open the "create new page" contextual menu - Choose "link" (the eighth item as of may 2017) - Click to add URL : The URL should be /index-name#page-name (replace with your index and page name) - The link title (above URL) is what will appear in the drop-down menu

Hope this helps :)

Am i following steps 1-4 correct? My need: SERVICES --> 1. Web Development & 2. Digital Marketing

Then I want those two services from my Menu to be gone.. However, I want all the content(digital marketing and web dev) to be on the index page.

Basically : https://margarines-thibault.squarespace.com/apropos#normes

Any help is appreciated to the max!

Also, very new to this!