Link menus to one page scroll

Hi I have tried to read everything about Sydney but did not get right or the links might be too old and does not work anymore.

I am almost done with my website, it is a one page scroll site and I want to know how do I link the menus and the different rows in my page so when you click on the menu it scrolls down to that particular part of the page.

Your help will greatly be appreciated!
Thanks
Johann

1 Like

Hello,

All you have to do in order to link to certain page section is to use this link structure:

http://example.com/#section-id

Just replace http://example.com/ with your home page URL, and #section-id with the id of respective section.

You can use only #section-id (it will scroll smoothly), but it will work only on that particular page.

You can find the id of an element by doing a right-click on it, select Inspect Element and find something like this:

<div id="pg-220-1" class="panel-grid"… - in this case, pg-220-1 is the id of a div element.

For more information you can refer to this guide.

I hope that it will help you.

Kind Regards, Roman.

Hi Roman

I’ve tried to do the same to avoid having to create a new page/s for one of my main menu headings “Our Work” which is displayed with various images on the landing page using Sydney Projects and while I have managed to get parts of the landing page to scroll down/up to a specific section using anchor links / anchor tags in the Layout Builder Widget by setting the Link for the button to (for example only: #pg-5-5) I don’t know where specify the link/URL when you click on the “Our Work” main menu to scroll down to that part of the main page.

Is there a specific place I need to paste the http://example.com/#section-id2 link into because I tried changing the permalink for the menu and also by inserting a URL into the Link Relationship (XFN) section as a last resort but have had no luck. I’m sure it’s pretty easy to do - just need to know where to do it, or how if I need to use the Appearance > Custom CSS editor. I’m using DesktopServer while I create the site so can’t give you a link to access as far as I’m aware.

Hello @Marc-o,

You should specify that link in the Custom Link menu item URL input field.

Kind Regards, Roman.

Hi Roman - thanks for the advice - Kharis provided additional details which I also used to resolve the issue.

Just incase any other (non developers) want to do the same the steps I followed are:

  1. Go to Appearance > Menus > Custom Links
    The Custom Links addition is used instead of adding a normal menu item

2.1 Custom Links URL = The section URL you want to redirect to on the page / site
e.g. http://www.YOURSITENAME.com/#pg-5-8 (page 5 - section 8 of the page)
2.2 Custom Links Link Text = Is the name you assign to the item which will be added to the Main Menu e.g. Our Work

  1. Then save the menu and check the link

  2. Delete any unwanted Menus you had before that did not link and are no longer needed

You are welcome, and thank you for sharing that!

Kind Regards, Roman.