GeneratePress

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

Similar Posts

40 Comments

  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

    Reply

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

    Reply

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

      Reply

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

    Reply

    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

      Reply

  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.

    Reply

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

      Reply

  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

    Reply

    1. Hi Arun,
      If you followed along exactly as in the video, it will work with the Elementor Nav Menu as well 🙂
      Cheers!
      Lyle

      Reply

  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!

    Reply

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

      Reply

  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

    Reply

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

      Reply

  8. 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?

    Reply

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

      Reply

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

      Reply

      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?

        Reply

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

          Reply

  10. 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!

    Reply

    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

      Reply

      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

        Reply

        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 🙁

          Reply

          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 Lyle –

            FYI, got it sorted out. It turns out it was an issue with GeneratePress and the CSS for the hover style. There apparently is also a “focus style” which is tied to accessibility features. Check out this thread if you’re interested:

            https://generatepress.com/forums/topic/menu-colours#579031

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

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

        Reply

  11. Hi Lyle, me again. 🙂

    Wondering if perhaps you might know how to achieve the same highlighting effect using just Elementor’s own menu widget. The scroll-to functionality seems to work easily enough with PS2id, but controlling the highlighted state has so far proven impossible.

    Any thoughts or insights would be greatly appreciated!

    Thanks,

    Richard

    Reply

      2. Hi Lyle –

        I finally got this figured out. Your method mostly translated over to Elementor, but there were some issues with how the last menu item behaved (e.g. whatever the last menu item was, tried several variations and made no difference).

        Ironically, Malihu posted this article on the same day that I posted my question here. Followed his instructions, and the problem was solved. His method does simplify things a bit — no need for the pageScrollToID widget in Elementor, and probably no need for the “home” div (though I haven’t tried that yet). Definitely worth a look:

        https://manos.malihu.gr/page-scroll-to-id-elementor-guide/

        Thanks,

        Richard

        Reply

        1. Hi Richard,
          That’s so good to hear that you have got it sorted 🙂
          Thanks for the link to the Malihu article. Will come in handy!
          And thank you for the coffee!!! 🙂
          Cheers!
          Lyle

          Reply

          1. Sure thing, Lyle! And yes, it is a relief to have it working finally!

            I did get it to work, btw, without having to add the div with the header hook, so it’s a pretty simple setup in the end. Very happy.

            Best,

            Richard

  12. Hi i want to create site with horizontal page scroll, but i cant use your plugin i setting but didnt work.
    https://joxi.ru/YmEWzplcwZMkxA
    https://joxi.ru/E2pjEn7C7BGqpr
    https://joxi.ru/12MOzxyHl4kYPr
    https://joxi.ru/MAjyEenCjvkJb2

    I want to create this site https://themezaa.com/html/resume/default/index.html?page=contact

    can you help me

    Reply

    1. Hi Mushfig,
      First off, this is not my plugin. It is from Malihu.
      Check out this link on his official page 🙂
      https://manos.malihu.gr/repository/page-scroll-to-id/demo/demo-horizontal-layout.html
      Cheers!
      Lyle

      Reply

Leave a Reply

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