How to Create Menus That Auto Select When Scrolling One Page Site

I'm building a one page site using Be. I'm using Visual Composer (WPBakery Page Builder Backend Editor).

I need to get my menus to function so that clicking a menu item scrolls to that section of the page, and scrolling the page automatically selects the appropriate menu item for the section scrolled to. You have this functionality in your demos (example here:https://themes.muffingroup.com/be/itservice/).

I've selected "one page" on the page options at the bottom of the editor. What other settings am I missing and how do I need to setup my menu items to make this happen?

Here's the URL for my dev site: https://ruleonepartners-wp.azurewebsites.net/

Thanks!

Comments

  • Hi,
    This is what you need to do:

    1. Go to menus and create a new menu - http://prnt.sc/f2v9he
    2. Name the menu and add a custom link with the ID anchor you will use later(do not use spaces). Add to menu -http://prnt.sc/f2v9th
    3. When the menu item is added to the menu, save and go to Manage Locations -http://prnt.sc/f2vafb
    4. You go to your main page, you see the new link but when you click nothing happens? No worries, it is because the link has to know where to scroll, to do this edit the page. -http://prnt.sc/f2vc36
    5. Edit the section to which you want the button to scroll -http://prnt.sc/f2vcho
    6. In the field Custom ID type in the id from the button, in my case, it was id=work, no hashtag there -http://prnt.sc/f2vgaz
    7. Remember to have the one-page option selected under the muffinbuiler -http://prnt.sc/f2vcm7

    If you do not want to use a normal menu to link the user to sections, you need to add a 'scroll' class to the custom link elemment.
    Thanks
  • Hi Pablo,

    Thanks for the step-by-step, but all of that was already done, and it still doesn't have the desired behavior.

    As stated in the original post, I want the page to function like your demo:

    In that demo, as the page is scrolled, the menu changes automatically to the current section.

    I don't understand what you mean by "If you do not want to use a normal menu to link the user to sections, you need to add a 'scroll' class to the custom link elemment." However, in that demo, the sections do not appear to have a special class assigned to them.

    Further, the first menu item on my site does not even activate when selected, though it does scroll to that section.

    Thanks for the help.
  • Hi,
    I see that your one page menu works fine.
    Everything is scrolling very smooth.

    Please clear your cache.
    Thanks.
  • Pablo,

    I've cleared my cache, and tried multiple browsers (chrome, firefox, edge), it's not a caching issue. The menus function, yes. But, when you scroll down the page with the mouse or scrollbar, the menus don't identify which section you are in. In you demo, the menu has this behavior.

    Here's a screen grab from your demo:
    image
    Note that the menu selection moves as the page is scrolled.

    Here's a screen grab from our site:
    image

    Note that the menu stays on HOME the entire time while the page is scrolled.

    I've installed your demo on another dev site and matched up all the settings, but cannot get it to work. What needs to change? Please help.

    Thanks.
  • Hey,

    Please send us WordPress dashboard access privately thru the contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

    Notice!
    Please attach a link to this forum discussion.

    Thanks
  • Please update your theme to the newest version first.
    As I see, you're using the Child Theme, so after updating, probably your theme will not be working, that's because we updated the Child Theme files to be more customer friendly.
    How to fix it? - Explanation below:

    You have to find and replace the 'mfn_opts_show()' to 'echo mfn_opts_get()' in files which were modified (inside your Child Theme).
    After that, everything should be working fine, we had to make that change because of the new envato rules, more about it here: https://help.author.envato.com/hc/en-us/articles/360000481243#h_674316188621522302914837

    Thanks
  • I updated the parent theme, and as you said, the site broke. The only files in the child theme are:

    functions.php
    style.css
    (and screenshot.png)

    Neither of these have the text you are referring to.

    Exactly what do I need to change and in what file(s)?


  • Okay, I updated the theme, replaced the functions.php in the child theme with the new version, changed the style.css Template line to betheme, so now the site is back to working.

    But, that had no impact whatsoever on the scrolling menus not working as expected.
  • I tried to enter your website but it cannot load, it gets timed out.
    It must be an issue with the ID of the sections and the menu link targets.
    Can you please check what might be the issue so I can inspect the code?
    thanks
  • Hi Bryan,

    I didn't have any such issue with the site not loading. We did have the site password gated, but I had already given your team that info. The password has now been removed and the site is live, but still having the same bug with the menus. I would very much appreciate an actual resolution to this issue.

    Thanks,

    Steve
  • The WPBakery changed the structure of their code a little bit and we had to include that change in our theme.
    It will gonna be fixed in the next update of BeTheme (which will be released on Monday).
    Thanks
Sign In or Register to comment.