Yesterday I saw a post on FB from a fellow group member. Along with a question as how he can perfectly make a One-Page site on Divi, he also wanted to know if we can highlight the current menu item. To make a One-Page site, you can refer to this Elegant Theme documentation. It’s perfectly explained there.

As for the other request, which we often see on various FB groups, you need to apply some JS functionalities. By default WordPress adds a class to the current page menu item current-menu-item. You can target this class and add your CSS styling. But the problem here is that it will not work on a One-Page site where the menu items take you to the different sections of the same page. Since you are residing on the same page, the WordPress class current-menu-item will apply to all menu items. And if you add CSS styling to this, it will affect all the menus. Not good at all. We want to highlight the particular menu which leads to the dedicated section of the page.

So, what is the solution? The only solution here, is to use some JS (jQuery library to be precise) and let the site know which menu you click, where you’re currently on and thus, highlight that menu item accordingly. First, have a look at the demo site.

I believe you have noticed the changes in the menu items! You can add more CSS to those menu items. Now we will see how we can achieve this. The code explanation has been given below.

STEP #1

Create a One Page site. Add your custom menu links. Refer to the ET doc link above and get this right. Add Div IDs (aka CSS ids) to each section of the page. Once you’re done with this, publish the page and move to the next step.

STEP #2

Move to Divi Theme options page (epanel) and go to the Integration tab. Find the field that reads Add code to the < head > of your blog. And, add the following JavaScript there, and save changes.

STEP #3

Now go to the Divi Theme Options General tab (or to the style.css file in your site) and add the following CSS rules.

You can style your menu items as you want. This is just an example. All you need to do is to target the .active class and add your own CSS styling.

CODE EXPLANATION

In the STEP #1 we created a One Page site and added a primary navigation menu. When published, the page has the menu items and these take you to the assigned sections of the same page with a built-in Divi scroll feature. Very cool.

In the STEP #2, we added a JS code. The first part of the code first checks all the available menu items. That’s why the ID #top-menu li. With this ID JS finds all the children menu items available in that nav menu which has a link (a href). Secondly, it calculates the height of the section in the document (read page). You may have a section which is 100px tall but another section which is 600px tall. So it will try to calculate the actual height of those sections dynamically.

Next it decides which section are you on right now. Following the demo site, let’s assume you are currently residing on the section number Two which has a div ID #two. Once it finds that, it assigns a specific class to the menu item which corresponds to this section. In this case, the corresponding menu item is TWO in the nav bar. And the class is active. When you move away from this section, it will remove the class from its menu item and add it to the menu of the section which you’re on. In other words, it means that a particular class active will be appended to the menu item if its corresponding section is currently in view. Hope I am able to explain this in an easy way.

Now you get the CSS class .active. You can take this and add your own styling whichever way you want. If you jump to another menu, it will remove itself and add it to the next menu you click, and the CSS will apply there.

More on this

If you want to use a JS file (recommended and best way) instead of using Divi Integration tab (since you may have other JS codes there and it looks somewhat messy), you can read on.

The standard approach to add JavaScript in a site is to put them in a JS file, instead of pushing them all in the <head> section. If you have many such JS snippets, it will be hard for you to maintain. Not a good approach though. You need to be a little bit technical on this. Not a big deal at all.

WordPress recommends to en-queue files instead of calling them in the head(or in another terms importing them in the head). We often see those files directly called from <head> which is not the correct way. See this link from WordPress.

Let’s see how we can do this. First create a JS file. You can name it like scroll.js (or whatever you want). Use FTP or cPanel and upload this file in your theme directory. If you’re using a child theme, then it will go to your child theme directory, else Divi directory. If you upload this to Divi, the path will read like this http://example.com/wp-content/themes/Divi/scroll.js. For child themes, it will be similar to http://example.com/wp-content/themes/YOUR-CHILD-THEME-NAME/scroll.js.

Now add the JS codes as given in the STEP #2. DO MAKE SURE to remove the opening and closing script types. Remove these tags <script type="text/javascript">......</script>.

All is set now. Open your functions.php file and add the following function.

Hope it helps you. Do let us know your feedback in the comments or if you face any problems in implementing this.

Thanks

Share This