Create one page scroll Menu

Create one page scroll Menu
1
Set ID for Sections or Rows
In WPBakery
In WPBakery

You need to set an ID for each Section or Row you want to scroll to using the menu.
To do this open the Setting panel of the Section or Row and choose a Unique Section ID or Row ID that begins with pix_sectionand which represents the content.

  • e.g. for a Features section/row “pix_section_features” would be a perfect ID!

Section Settings

Row Settings

Example of adding Section ID

In Elementor
In Elementor

You need to set an ID for each Section you want to scroll to using the menu.
To do this open the Section Setting to the Advanced tab and choose a Unique CSS ID that begins with pix_sectionand which represents the content.

  • e.g. for a Features section/row “pix_section_features” would be a perfect ID!

Example of adding Section ID

2
Add Link to your website Menu

After setting the ID for the Sections/Rows, you just need add links to your Menu.

To do this, from your WordPress website dashboard open Appearance > Menus

and then for each Section/Row with an ID you can add a Custom Link as following:

  • URL: the ID of Section/Row starting with “#“.
  • Link Text: any link text you want 😀

Example of adding Link to Menu

  • Note: if you to make the anchor links accessible from other pages in your website (this means when you click on an anchor link in the menu in other pages, the page that contains the section will open and scroll to that specific section), please add the full page URL before the anchor links in the menu.

    For example, if your page URL that has the section is “https://site.com/” and to add to the menu an anchor link to a section in that page (with Section ID as “pix_section_features”) that is accessible from other pages, the link in your menu should be “https://site.com/#pix_section_features“.

  • Want to use buttons and links to scroll to sections instead of the menu?
    For the step 2 in the article, instead of adding links to the menu you can do the same for the buttons/links in your page to scroll to other sections (add the ID of Section/Row you want to scroll to starting with “#“ in the Button Link field)

3
The result 🤩👌🏻

You can see a live example in the Landing Demo.

pixfort
pixfort
Essentials support team
hub.pixfort.com

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts