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

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

graphic

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

0 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

Leave a Comment

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