Simple & Easy Help
for WordPress Beginners

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

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

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 for Before Header hook location in GP Hooks:

<div id="home"> </div>

CSS for the #home id:

#home {
    max-height: 0px;

CSS for active menu item:

.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

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

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

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

Leave a Comment