Adding Anchor on single page site to Menu

Elements
1

Is it me but im struggling to add an anchor to the sticky menu on a single page website.

Chris

2

No problem, you can do that!

Here’s how:

  1. Right-click in the Page list and select “New Link”.
  2. Add your anchor as the URL, something like “#your-anchor”.
  3. Click in the page list to rename the menu item.

In the video, I write /#anchor, but you don’t need the forward slash, you can just use #anchor.

3

Hey Dan

I’ve setup anchors for my landing page and currently I’m publishing to a preview directory.

When I publish my landing page the anchors send the link to the top-level of my website not to the anchor location on the current page located in Preview.

I have set the the web address under the general publishing setup to the www.my-website.com/preview/ as well as under the Publishing setting for the website and it doesn’t have any effect.

I managed a work around by adding /preview/ to the front of the anchor name but this breaks the desktop preview at 127.0.0.1.

Any suggestions would be greatly appreciated.

4

Sorry, that URL doesn’t work (goes to a domain holding page). Can you share the correct URL? and the project via Elements Cloud then we can get it worked out for you :blush:

5

Dan,

I’ll try again once the Publishing bug is fixed.

Last night Elements published over 6500 files in over 700 directories for a simple landing page.

Thanks

6

We’re working on the publishing manifest fix right now, so the next build of Elements will start to track what’s changed and only upload the changed files going forward — Stay tune for that!

7

@iamliving You’ll want to give the latest build (1.0.2) a try, as this fixes the re-publishing of all files issue :wink:

8

OMG! This is fantastic! I was looking for this inside the manual for over an hour! Thank you so much for creating this little video tutorial, Dan!

9

Dan,

Thank you so much for this video! It solved the problem I was struggling with, changing my three page template into a one page site with anchors as menu items. I’m a beginner here and this saved me from starting over.

10

Hi Dan,

I’m using anchor links as menu items as well, and they worked on both my English and French websites. Unfortunately, because the French site is nested in a directory on the English site on my FTP site, when I click on the anchor links on the French live site, they open on the English site.

The links are to the right of the “Contact Us” button. They are showing as black EN and FR right now; I have to change the buttons.

The french site just has the main site with /fr/ at the end. I’m not sure what to do to fix this.

Thanks.

11

On the French project, make sure each Page List “New Link” is just #your-anchor with no leading slash. /#anchor resolves from the host root, so it jumps straight to the English site. Same idea if anything is pointing at the top-level URL instead of staying on the current /fr/ page.

Also check Site Settings → General → web address on the FR project is the French URL including /fr/.

If it’s still hopping after that, drop the FR project into Elements Cloud and I’ll take a look.

12

Hi Dan,

I wrote the post below as I was working on the project, but I just tried the site on my cellphone and in a different browser, and everything is working now. Sheer determination and many hours of trying different things got it to work, and, of course, your help, so thank you!

Rhonda

Thank you. I believe when I created the anchor links I used a leading slash, but I renamed them. Does that still cause a problem? I checked online and they both just show the path with # I’ll redo them if necessary.

I just checked the French URL and it was missing the forward slash after fr. I’ll re-upload the website tonight.

I’m changing my EN and FR buttons to FlexBox text because I can’t fix them. No matter what I do to my menu links for EN and FR, once I click them they turn black. I will upload the French project to the cloud. I really don’t know what I’m doing wrong…

Continuation of my post: The buttons are fixed. I redid the anchor links without the /, but they still don’t work. The projects have been re-uploaded and I will upload the new versions to the cloud now. Please take a look and see if you can figure out what is wrong. The root level of the ftp site has a directory named /fr/, and my url ends in /fr/.

Thank you.