GeneratePress – Elementor – Page Scroll to ID – One Page Website

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code iconΒ raw code icon

If you are using the Page Scroll to ID plugin with Elementor buttons, see the bottom of the page for more information.

How to set up a one page website with menu highlighting using the GeneratePress theme along with the GP Premium, Elementor page builder and Page Scroll to ID plugins.


<div id="home">&nbsp;</div>
#home {
    max-height: 0px;
.main-navigation a:hover, a.mPS2id-highlight {
/*color: orange !important;*/
background: #f2b230 !important;

Using Page Scroll to ID with Elementor Buttons

Replace the existing value in Dashboard > Settings > Pages scroll to id > Section(s) with the following value:

a[rel='m_PageScroll2id'], .elementor-widget.ps2id a[href*='#']


Add ps2id as the Class for the button in the button’s Advanced tab and Save

20 thoughts on “GeneratePress – Elementor – Page Scroll to ID – One Page Website”

  1. Hi Roy: Thanks for the tutorial. I am using Elementor Page Builder with Generate Press Theme. Yet, do you know how to make a smooth scroll like this? Like, your scroll down (Mouse or finger with mobile) then automatic to another anchor point? Is there any plugin I can try? Very Appropriated if you cant help Thanks Justin

  2. Hello Lyle,
    for the CSS for active menu item.. Is it that same selector for OceanWP/Astra Theme?
    Thank you!
    Best regards,

    1. Hi Stefan,
      Don’t know about OceanWP, but you may want to try .main-header-menu a:hover for Astra.

  3. I tried using the custom css for the menu highlighting effect, the only problem is that it stays highlighted all the time.

    1. Hi Luvuyo,
      There has to be enough space between the sections so that more than one is not visible at one time.

  4. Hi
    Thanks for the tutorial very helpful.
    I’m using the Astra theme with Elementor,
    Is there a way to highlight the menu text instead of the background ?
    I tried custom css for .main-header-menu a:hover
    but no luck.

    1. Sniffle Valve

      Hi Jeffrey,
      You’re welcome and good to hear it was helpful πŸ™‚
      If you have it working now as in the tutorial, then it’s quite simple. Just comment out line #3 in the CSS for active menu item and uncomment line #2 and change orange to whatever color you want.

      .main-navigation a:hover, a.mPS2id-highlight {
      color: orange !important;
      /*background: #f2b230 !important;*/


  5. Hil Lyle

    I have just created a page with Astra and Elementor. I used the blank template and created the main menu with the Elementor Nav-Menu Widget.

    It look really good all I need is to get the active Menu link to follow along when the viewer scrolls the page.

    Please help me to figure out how to get the ps2id plugin to work with the Elementor Nav-Menu.

    Thank for and God bless


    1. Sniffle Valve

      Hi Arun,
      If you followed along exactly as in the video, it will work with the Elementor Nav Menu as well πŸ™‚

  6. Hi,

    Thanks for your great tutorials.

    I’m using Elementor + Page scroll to ID, for builiding a one-page site.
    Can you please tell me how can I highlight the menu button with the Elementor “active” style, and not with custom css style?


    1. Sniffle Valve

      Hi Haiam,
      Adjust the custom CSS to match the Elementor active style. Use your browsers dev tools to inspect what that style is and edit the custom style accordingly.

  7. RE: Using Page Scroll to ID with Elementor Buttons

    Thanks for doing the digging on this…strange though, did as instructed but elementor btn still won’t “smooth scroll” to section #id. (#my-story).

    Any ideas? Mitch

    1. Sniffle Valve

      Hi Mitch,
      You’re welcome πŸ™‚
      Please note the Update notice at the top of that page re: Elementor buttons, and the instruction that are provided at the bottom of the page.

  8. luis castellanos

    im trying to use CSS ID in section of elementor (sorry for my english)
    and try in CSS CLASS with m_PageScroll2id and ps2id but just jump to section
    how can i use this?

    1. Sniffle Valve

      Hi Luis,
      If you are using an Elementor button as a link to your section, read the update note about doing so. If not, then check to make sure that you have followed the instructions in the tutorial correctly πŸ™‚

    1. Sniffle Valve

      Hi Graham,
      If you did everything as in the video, it should work.
      A couple things come to mind:
      – you did Save Changes πŸ™‚
      – did you clear your caches, i.e. and cache plugin and your browser’s cache (hard refresh).

      1. I did everything in the video! I did click “Save Changes” and I also tried on a different browser. I don’t know why it’s not working. 😑Also FYI I am using OceanWp Theme.

        What are your thoughts?

        1. Sniffle Valve

          Sorry, had to ask about the save changes πŸ™‚ LOL
          Not to sure what it could be then. Perhaps try a large value, such as 140 and see if that makes a change.
          I don’t use OceanWP but it does work for me on Astra and GeneratePress.

Leave a Comment

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