Single Page Navigation

Hi @jediseamac

You can link to different sections by adding ids to the end of the front page url.

Try clicking this link for example:

https://www.customsongworkshop.com/#post-8

It should link you to the “Choose your song” section, which has an id of post-8 in the sites html.

You can follow this guide for details on how to add custom links to your menu.

If you’re not familiar with how to inspect a sites html to find the ids for each page, you can use a plugin that will display them in the admin:

https://www.ads-software.com/plugins/reveal-ids-for-wp-admin-25/

For example, the Payment page should have an id of 224.

You can link to that like this:

https://www.customsongworkshop.com/#post-224

@gary-barrett, this is amazing, thank you! I thought this was going to be a long-term project, not something I could do in an hour. All the other online explanations and videos I found were way above my pay-grade, and I couldn’t get them to work for me. I coupled what you told me with a smooth scroll plug-in (https://www.ads-software.com/plugins/page-scroll-to-id/), and now to the uninitiated, I might even appear to know what I’m doing with this web-design stuff! Thanks for the clear explanation!

So now I’m left with two small question to put a bow on this topic.

First, should I also make my “Home” page a custom link? I tried it, but then I couldn’t use the “Home” link in the menu bar to get back to my page. I have some pages that are set to regular menu links that navigate away from the main page (i.e. “Order Form.” or “Fine Print”). What do you think?

Second, and the answer to the first might influence this, is there an easy way to put a “Home” link at the bottom of all my other pages so that customers can get back to the top simply by clicking, without having to manually scroll up?

Thanks again for the help, and I look forward to your thoughts on this.

You’re welcome ??

First, should I also make my “Home” page a custom link? I tried it, but then I couldn’t use the “Home” link in the menu bar to get back to my page.

Try changing the url for the custom home link to https://www.customsongworkshop.com/#content

For a ‘back to the top’ link, the easiest method is to use of of the available plugins – https://www.ads-software.com/plugins/search/back+to+top/

Worked like a charm on both accounts! Thanks a ton for the help!

You’re welcome, glad I could help ??

@gary-barrett As I’ve worked with my page a bit more and unveiled it to the public, I’ve realized a few more issues with my navigation that I can’t quite solve on my own. I ended up putting all my pages on the single page scroll, but my Google Forms order form is awful on mobile because you can’t skip past it like on a computer. You have to see the whole thing which is very inefficient for those who don’t want to make an order.

I’ve tried to work around it by creating a “more” button for my Order Forms page, but that send my viewers away from my page. I’m okay with that, but my navigation menu doesn’t work once you’ve left the main page. Only the “Home” button works, thanks to what you showed me about the #content thing, but I really need the “Payment” link to also work, and if I could get all of them to work, that’d be even better.

If I can’t get all of the menu buttons to work, then it’d be great to remove the menu and just have a Home link, or a Home and a Payment link.

Do any of those options seem possible?

For the custom menu links, did you add absolute links this:

https://www.customsongworkshop.com/#post-5

or just #post-5 ?

You need to enter the full absolute links.

If that doesn’t address the issue you’re experiencing, please post the exact steps I need to take to see the issue you’re describing.

Thanks ??

Alright, this is really weird. I did just what you said in my custom menu and entered the full link for the Payment page, and it worked perfectly. It smooth scrolls on the single page, and you can easily get to it from the Order Form page when you navigate away.

Then, I did the exact same thing with the custom menu for the Choose Your Song page, and something strange happened. If you click Choose Your Song in the menu, instead of smoothly scrolling directly there, the page reloads at the top, as though you’ve just clicked on a brand new page. Once it loads (I have slow internet!), THEN it scrolls down to the Choose Your Song page. I did the same thing with the Contact page just to test it, and it, too reloads the page at the top before scrolling down, instead of just scrolling right to it like before.

So as of right now, I put full links on the menu for Choose Your song (weird behavior), Contact (weird behavior), and Payment (normal behavior). The other menu items just have the #page-id, and they are functioning normally.

I should add that when looking at the menu, both Home and Payment are underlined, but none of the rest of them are. Home was always underlined, but as far as I know, I never did anything different with the Payment page than I did with any other page.

Also, could this all somehow be affected by the smooth scroll plug-in I have installed?

Okay, thanks a ton. Let me know if you want a custom song for your troubles!

Nevermind! What a clown I am! The other links didn’t have “www” in them, and I guess the browser thought I was going to a whole new site. Your first idea worked perfectly, I just screwed it up. Seriously, I’m decent at some other things in my life, but this is not one of them. Thanks again for all the help!

You’re welcome, the site is coming along nicely. ??