How to Link to Page Content from a WordPress Navigation Menu

anchor | wordpress on-page links

Sometimes you want your navigation menu items to link to something on the middle of the page. This is especially true for one-page websites or long scrolling homepages.

Fortunately, linking to “anchors” in the middle of the page content is easy in WordPress. This quick video shows you how.

Here’s a quick text summary of the video:

How to Make Nav Menu Links to On-Page Content

  1. Give the item you want to link to an id attribute—for example, <h2 id="target-element">Section Title</h2>.
  2. In the Menu area in either wp-admin or the Customizer, create a new Custom Link.
  3. Set the Custom Link to point to the page on which the content lives, plus the # character, plus the value of the element’s id attribute—for example, https://mysite.com/about-us#target-element.
  4. Save your changes to the menu and test the link to make sure it works.

And that’s it! Creating on-page links can be a very useful thing to know how to do in WordPress, so give it a try.


2 Responses

Comments

  • Martanian says:

    If you’ll add that kind of custom links to the main menu not as a child, but as the main menu link, then it can be highlighted as “active page”. So in the case that you described on your video, both “Test Page” and “Second section” links will be highlighted when you’ll open “Test Page”, which is not good in most cases.

    One of the possible solutions for that problem is to add custom CSS class for this kind of custom links, like “custom-link-no-highlight”, and then modify the theme CSS code (via child theme for example) to disable highlight for links with this class.

  • Manoj says:

    Great tutorial. I want to link a menu item to a certain part of a page & looking for the suitable guidance. I Googled and finally, I found this article.

    I never thought that the process was so simple.
    Thanks for the writing. It’s very useful.

    All the best,

Add a Comment

Your email address will not be published. Required fields are marked *