- Posts
I love the Crio theme, but just had a request that we change the website from multiple pages to one page. I don’t want to start over with a new theme and would like to modify the Crio theme to function as a one-page website. I am able to modify the menu navigation to link to the sections on the page, but the issue is that all menu items are not highlighted as active. Is there a way to modify the theme either through css or jquery to get the active links to highlight when on the corresponding section?
Hi Belinda-
Thanks for the interesting question! You could probably accomplish this in the Crio Theme with some fancy jQuery, but I think there’s an easier way.
The free plugin Page Scroll to ID does most of the heavy lifting you need to accomplish this, and adds some good bonus features too.
It will:
- Automatically add a “clicked” class to anchor links in the menu that were clicked
- Automatically add a “highlight” class to anchor links in the menu as you scroll around the page
- Allow you to specify an offset so that you can fine-tune the top of the page for anchors
- Give you a few more fine-tuning options, like different scroll animations
Then, all you’ll need to do is add CSS for the plugin’s two classes (
.mPS2id-highlightand.mPS2id-clicked) to match your preferred active link style.The specific CSS for that is going to depend on which variation of Crio you’re using, so if you’d like assistance with that just let us know your site’s URL and we can take a look for you.
- The topic ‘How do I modify Crio to a one-page site and highlight active links?’ is closed to new replies.
