Jump to content

Navigation bar for Index Page

Recommended Posts

I want to build a single page site with an index page, but I need a navigation bar to this page, like this: http://boy-coy.com/

I’m trying but only managed two types and was not what I wanted. 1. I get the navigation bottom in the right side of the site (the little balls) 2. I create a link but the page didn’t scroll down, only transfer me to an exclusive page


Link to comment
  • Replies 5
  • Created
  • Last Reply
  • 3 months later...

I got around the problem by creating a folder that's just a link. So the name of the folder was

"<a href="/about-us"><span>About Us</span></a>."

In my case, "About Us" was the name of my index page. You can then move your index page into the "not linked" part of your pages. Note that you need the span or your styling will be off.

After this, you will need to add "link" pages under the folder. These need to point to the anchors which squarespace creates in the index page. If you open your index page in a separate browser window and scroll down you will see a "#name" at the end of the URL. This should change as you scroll down. There will be one for each "page" in the overall index.

When you've arrived at the "page" in your index that you want, copy your URL. Then create a link under the above folder and paste in the URL. So if your URL is "http://sitename.com/about-us/#the-team", your link name might be "The Team"—this is what will show in your navigation.

The above will give you what you want. The only problem with it, that I've seen, is that the first time you click on a sub-navigation item, it doesn't smoothly animate to it. It does on subsequent ones, but the first one it simply loads without animating the scroll down the page.

But this process is simple and doesn't require any special CSS or coding, so there you have it.

Link to comment
  • 3 months later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.