Need a fun Menu that knows where you are on an Upfront Page

hi guys,

so i saw a really cool menu on clicktale.com.
what it does, is it's a floating little doodaah with icons, that flips out a tool tip when you mouse-over.

you can use it to navigate on the home page, and the active button is colored, while the inactive buttons remain grey.

i'm sure this happens with JS?

what do i need to do to make this work on my sites where i run upfront themes?

i quite like it. :slight_smile:

  • Adam Czajczyk

    Hello Symi,

    I hope you're well today and thank you for your question!

    The page you're referring to is based on Drupal instead of WordPress so I'm not quite sure what solution do they use to power that menu. However, judging upon its behavior I'd say that replicating it "as it is" would require quite a bit of custom CSS + JS coding, most likely in form of a plugin as Upfront themes do not allow you to directly change theme template files and functions.php file.

    I think there may be a workaround though. I found this plugin that adds a nice scrolling ability to WP sites:

    https://pl.wordpress.org/plugins/page-scroll-to-id/

    This would be a "foundation". Next steps would be:

    1. Install aforementioned plugin (default settings should do the job)
    2. Create some "anchors" on the page where you'd like to use your menu

    Upfront supports anchors right out of the box. To create one, click on "settings" (little "gear" green icon) for an element you'd like to scroll to, select "CSS styles and Anchor Settings" link, check the "anchor" box and give it a name (e.g. "slidepointA").

    3. Create a new WP menu via your site's Dashboard, be sure not to assign it to any location
    4. Add some new "Custom Links" to this menu making sure that the URL section contains your anchor values (e.g. "#slidepointA") and following additional steps described on plugin's description page

    5. Create a new "floating region" on your site with Upfront editor and place a new "Menu" element on this;
    6. From menu selection list choose the menu that you've created in step 3.

    At this point you should end up with a nice "floating menu box" on your site that would scroll the site pretty much the same way as on the page in question. I tested this on my own setup with Scribe theme and can confirm that it's working.

    From now on, it's the matter of giving that menu nice custom CSS that would tweak the look of floating region itself, replace menu text with icons and e.g. add simple tooltips.

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.