GeneratePress

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

UPDATE
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*='#']

graphic

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

31 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,
    stefan

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

  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.
      Cheers!
      Lyle

  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;*/
      }

      Cheers!
      Lyle

  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

    Arun

    1. Sniffle Valve

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

  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?

    Thanks!

    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.
      Cheers!
      Lyle

  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).

    staging.mitchellfanning.com.

    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.
      Cheers!
      Lyle

  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 πŸ™‚
      Cheers!
      Lyle

    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).
      Cheers!
      Lyle

      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.

  9. Hi –

    Thanks for the tutorial, works great so far. Except for one small thing, which I’m hoping is an easy fix . . .

    I noticed that if you click on one of the items, and then manually scroll to another section before actively clicking into the page, the clicked item remains in its ‘selected’ state (in the case of the demo, the yellow background).

    I double-checked, and this is not a case of having multiple sections visible in a single screen-view.

    Any ideas?

    Thanks in advance!

    1. Hi Richard,
      I just checked this on a local test site and I do note get that behavior. When I manually scroll to another section, the previously clicked one become inactive (no yellow) until I get to the following section.
      Not too sure what could be going on.
      Cheers!
      Lyle

      1. Hi Lyle –

        Thanks for the quick response! Strange, indeed . . . are you sure you didn’t click on the page somewhere before manually scrolling? That’s basically the issue. If I click the nav item, wait for the page to scroll, and then click on the document somewhere, it works fine. But if I manually scroll immediately after auto scroll, without clicking anywhere else, the selected state sticks.

        This is happening in Chrome on my Mac . . . perhaps it’s a platform/browser thing, haven’t tested anywhere else yet.

        Thanks again.

        Richard

        1. Could be a platform issue as it works as intended for me on my Win 10 machine in Chrome. I have no way to test on a Mac πŸ™

          1. Could be . . . though it is consistent on Mac Firefox and Safari. I’ve been doing some digging, and it seems it is definitely something that has to be handled — seems that the PS2ID dev maybe missed something . . . so may need to inject a line of jquery somewhere to blur the focus on scroll.

            Thanks again. (and feel free to delete that duplicate post. another mac/chrome-related issue! πŸ™‚ )

          2. Yeah, I really don’t know what it could be other than a platform issue. As I have mentioned, it works fine and as intended on my Win 10 machine. Strange …
            Perhaps reach out to the PS2ID author, Malihu, to see if he has any insights. He generally is quite responsive to any inquires πŸ™‚
            https://wordpress.org/support/plugin/page-scroll-to-id
            Cheers!
            Lyle

          3. It’s also occurred to me that we may be scrolling differently . . . if you are scrolling with the browser’s scrollbar, you are effectively putting focus on the scrollbar, and taking it away from the nav item. If, however, you are using a trackpad or scrollwheel (as is my case), the focus is not transferred, and hence the defect.

            Just another thought. . . I will reach out to Malihu as suggested, thanks.

          4. Hi Richard,
            Good to hear that you got it sorted πŸ™‚
            I was just about to suggest you send the site URL via the contact form here so that I could have a look.
            FYI, I was scrolling with the mouse wheel when testing.
            Thanks for the link to the GP forum.
            Cheers!
            Lyle

          5. Thank you again, Lyle. Keep up the great work with this site, I’m finding tons of useful info, having just gotten onboard with GP and Elementor.

            Best,

            Richard

      2. Hi Lyle –

        Thanks for the quick response! Strange, indeed . . . are you sure you didn’t click on the page somewhere before manually scrolling? That’s basically the issue – the clicked item keeps its selected state while it has focus — as soon as focus goes to the document (by clicking on the page), it behaves as expected.

        So close . . . yet . . .

        Thanks again!

        Richard

        Thanks again.

        Richard

Leave a Comment

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