How To Style And Highlight The Active Menu Item In Divi Tutorial by Pee Aye Creative

How To Style And Highlight The Active Menu Item In Divi

In this tutorial I will show you how to style and highlight the active menu item in your Divi navigation menu.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Add A Custom CSS Class To The Menu

The first step is to add a custom CSS class to the specific Menu module that you want to target. We do this so that the snippet does not affect all the menu modules on your site, which allows us to choose which ones remain unstyled and which ones are affected. Open the Divi Menu module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-active-menu-item” in the CSS Class input field.

style the active menu item in Divi

Add The CSS Snippet To Your Site

Next comes the CSS snippet that will be used for a base. We will explain this snippet in the video, so it will be super helpful to watch that I demonstrate each snippet. Be sure to reach each title carefully to see if which snippet you want to use. You can use more than one, but not all of them.

All of these snippets are not intended to be used together! You only need to chooose a few of them from this collecton of four snippets. Again, please be watching the videos as I give much more context about what I mean.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Apply Style To The Active Top Level Menu Item

/*apply style to the active top level menu item*/

.pa-active-menu-item .et-menu-nav>ul>li.current-menu-item>a {
	border-bottom: 2px solid red !important;
}

Apply Style To Any Active Or Normal Top Level Item If There Is An Active Submenu Item

/*apply style to any active or normal top level item if there is an active submenu item*/

.pa-active-menu-item .et-menu-nav>ul>li.current-menu-parent>a {
	border-bottom: 2px solid red !important;
}

Apply Style To Active Submenu Item Only If The Parent Is Also Active

/*apply style to active submenu item only if the parent is also active*/

.pa-active-menu-item ul li.current-menu-item>ul>li.current-menu-item>a {
	border-bottom: 2px solid red !important;
}

Apply Style To Any Active Submenu Item

/*apply style to any active submenu item*/

.pa-active-menu-item ul li.current-menu-parent>ul>li.current-menu-item>a {
	border-bottom: 2px solid red !important;
}

Code Explanation

Different Code Needed For Different Scenarios

As mentioned, the video is the best way to really learn and visually see what is going on here. Basically, there are various situations that you may face depending on the way your navigation menu is set up. For example, the CSS code selector will be different if it is in the top menu or the submenu. Also it will be different if the active menu item is a parent or child of the top main menu or submenu. Essentially this leaves us with four scenarios. You do not need all of the code given above! If you each of them, it will not work as intended. Instead you need to look carefully at each of the titles and comments in the code and only apply that particular snippet if it applies to your situation.

Other Styling Options Besides Border Bottom

In our code we are using an example of a 2px solid border on the bottom. But you can certainly change that! Our guides are men at as starting points for you to explore and learn. You may want to experiment with other things such as changing the color of the link text, or the background color. It’s up to you!

Last updated Aug 31, 2021 @ 9:23 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

24 Comments

  1. Stephen Guy

    Hi Nelson,
    As always a great tutorial. I have a quick question. I know this tutorial is for the builder, but we have a large multi-site that for internal reasons of training etc., we have not pushed or used the builder on (I use it on my personal sites). My question is, can I use this strategy on the main Divi menu? From within Divi itself and the menu builder, I tried to declare the class on the dropdown menu item that I needed, and then add the CSS but it didn’t work. Here is the site and page I am trying to fix. What we need is the “active” link to show in white (instead of green on green), or I was going to play around with just making the background white. Either way, it would be better than just having the item disappear.. Here’s the URL: https://benefits3.filice.com/greencircuits/hsa/. Your thoughts and/or suggestions are appreciated.

    Reply
    • Hemant Gaba

      Hey Stephen,

      I investigated the URL that you shared and here are the issue and the best approach to pursue in your case:

      Issue: The Green on the green doesn’t make much of an issue because the shades of green are different and visible easily but when you scroll down, as the background gets white, the menu items in the white color disappear which you can witness in the video I made. https://www.loom.com/share/afef3c368eaf4f31ab551def416d9995

      Best Approach: Here is the CSS and the jQuery code that I think is the best approach in your case and you can change anything as per your liking. CSS should be placed in Divi > Theme Options > Custom CSS Panel and jQuery in Divi > Theme Options > Integrations > Panel.

      CSS:
      header#main-header.et-fixed-header{
      background-color: #97cb5c
      }

      .et-fixed-header #top-menu li a{
      padding-bottom: 5px !important;
      margin-bottom: 40px;
      }

      .et-fixed-header #top-menu li.current-menu-ancestor>a, .et-fixed-header #top-menu li.current-menu-item>a{
      color: #fff !important;
      border-bottom: 2px solid #fff;
      }

      jQuery:
      jQuery(document).ready(function(){
      jQuery(window).on(“scroll”, function(){
      if(jQuery(“#main-header”).hasClass(“et-fixed-header”)){
      jQuery(“.logo_container a img”).attr(“src”, “Place the logo URL that you want to show on scroll”);
      }else{
      jQuery(“.logo_container a img”).attr(“src”, “https://benefits3.filice.com/greencircuits/wp-content/uploads/sites/538/2021/10/green-circuits-logo-white.png”);
      }
      })
      })

      Place the jQuery code by wrapping it into script tags. You need to create a logo where Green Circuits should be written in white same as Precision Driven Performance is written and that logo link should be placed in the above jQuery code where this “Place the logo URL that you want to show on scroll” is written.

      Do all these changes and let me know how it goes.

      Reply
  2. April

    Hi Nelson, I love your tutorials – makes css easy to understand! I tried to put this in a test site at sandbox.scrumpdelish.com using the theme builder with a menu module and I can’t figure out why it isn’t working. Even just the one line of css doesn’t work. As a final style I wanted to have a square appear around the active menu item and the color change on hover. Some I can set right in the module like text color etc. I’m just not that comfortable with CSS yet to figure out what wet wrong. Happy Thanksgiving 🙂

    Reply
    • Hemant Gaba

      Hey April,

      I have investigated the URL that you have shared and the hover color change seems to work fine on my end. To check the active menu or submenu item color change, could you please add the pages to the link instead of # for me to make changes?

      Reply
      • April

        Hi! Thank you so much. I’ve been playing with it a bit more and it seems to be browser-specific as to what will show up. I’m using Safari on a mac but in Chrome it shows up using style.css so maybe there is something that is configured incorrectly… but to show up in safari I added the styling to the advanced tab in the menu module… strange?

        I would also like to reduce the size of the padding as well so the background color is not as large a square and there is less space between the menu item and the border-bottom…

      • Hemant Gaba

        Hey April,

        Placing the code in the Advanced Tab increases the priority of the code so maybe the code was getting neglected due to another code in different browsers. So if the code is working fine on different browsers now then it’s great otherwise I will create a code for you to increase the priority.

        Another thing that you asked is regarding the height so I have created a code for you. Please check that and let me know how it goes.

        ul#menu-main-menu li a{
        padding: 0 !important;
        }

        .et_pb_menu_inner_container{
        max-height: 80px;
        }

        .et_pb_menu__logo a img{
        max-width: 102px;
        }

  3. Michael

    Hey there
    Great tutorial as always! Thank you so much.
    I have the following issue:
    i created a custom menu, linking to #cssids within the page the menu is placed in.
    Now all the links are shown as active.
    Can I prevent that from happening?

    Reply
    • Hemant Gaba

      Hey Michael,

      I have investigated the menu and I cannot see all the menu items being active on my end. Could you please check the website on a different browser or incognito mode and see if that helps?

      Let me know how it goes.

      Reply
      • Talib

        Please need help. I did everything as you mentioned but the active style isn’t working on my Divi menu module. Can you please visit my website and tell me what’s wrong here.

  4. Talib

    Hi Nelson. I did everything as you mentioned but the active style isn’t working on my Divi menu module. Can you please visit my website and tell me what’s wrong here. Here is my website link: expertwebagency.com

    Reply
    • Hemant Gaba

      Hey Talib,

      As I could see on the URL provided, everything is working fine on my end. Please try using a different browser and see if that helps.

      Let me know how it goes. 🙂

      Reply
  5. Asha

    Hi Nelson, thank you for the amazing tutorial. It works brilliantly! I have one issue though, on a site I am developing, the home page is totally fine, but on a subsequent page, the menu jumps up the three pixels that the underline is. Do you know what could be causing that or how to fix it? Many thanks in advance.

    Reply
    • Hemant Gaba

      Hey Asha,

      I am not able to replicate the same issue on my end. Could you please let me know if I am missing out on something here?

      Reply
  6. Zoey

    Hi Nelson! Thanks for the post, you’ve offered the easiest solution I have seen so far. This might be a silly question but how do I change the colour from the solid red to a hex # colour? 🙂

    Reply
  7. Jaimee

    Hello Nelson! Fantastic tutorial! Another active menu item related question. What do you do if one of your menu items is an anchor link to a section on the homepage? Right now, it shows that both the homepage and the about us page are active (which I guess technically they are).

    Would there be a way for about us to only show as active when it was clicked instead of on site load? Thanks so much!

    URL: http://marciea.sg-host.com/

    Reply
    • Hemant Gaba

      Hey Jaimee,

      Could you please try this code and see if that helps?
      jQuery(document).ready(function(){
      jQuery(“li.menu-item-456”).removeClass(“current-menu-item”);
      jQuery(“li.menu-item-456”).removeClass(“current_page_item”);

      jQuery(“.nav li a”).each(function(){
      jQuery(this).on(“click”, function(){
      if(jQuery(this).parent(“li”).hasClass(“current-menu-item”) && jQuery(this).parent(“li”).hasClass(“current-page-item”)){
      //Nothing
      }else{
      jQuery(“.nav li”).removeClass(“current-menu-item”);
      jQuery(“.nav li”).removeClass(“current_page_item”);
      jQuery(this).parent(“li”).addClass(“current-menu-item”);
      jQuery(this).parent(“li”).addClass(“current_page_item”);
      }
      })
      })

      })

      Paste this code in Divi > Theme Options > Integrations > Panel after wrapping it in script tags and let me know how it goes.

      Reply
  8. Reuben

    Is it possible to adapt one of these snippets to keep the menu item highlighted if the active page is a child page of that highlighted page (but not listed in a sub-menu)?

    For instance I want to be able to keep the year highlighted in my archive menu when users have navigated to any child page of that year.

    Reply
  9. ahssan

    First thank you for the the simple CSS code. Very helpful.

    I have searched for a way to highlight parent menu when user visits a post.
    For example, we have two pages and each have a divi blog. And while the user is on the page, the highlight still works. But once the user clicks on the post itself, WordPress does not link it to the parent. Even though that is the path.

    Can a category be linked to a parent page such that when visiting the post, the parent indicates the highlight?

    Reply
  10. Luc

    Thank you for this tutorial
    I have a question that is related to :active in CSS.

    I am trying to add an active color to the clicked images (for instance when the “Materials” is clocked to remain a darker blue) on the bottom menus (visible only on mobile version) and I tried everything I know with no good results.

    The links is https://enginljon.is

    Reply
    • Hemant Gaba

      Hey Luc,

      We will look into the issue and get back on this.

      Reply
  11. Lacey

    How do I reduce the space between the menu item and the line?

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart