Your menu is one of the first things visitors see when they go to your website, so you want it to have some style right? Of course, you do! That’s why in today’s post I’m going to share three ways to add some nice hover effects to your menu with custom CSS.

Hover effects should be subtle, we want visual interest but that’s not the most important part of the site, your content is. These will add just the right amount of “pop” to your Divi navigation.

Not only will we be adding a nice hover effect but there will also be some style applied to the link of the active page. For instance, if the user is on the homepage, then the home link in the menu will have some sort of small design treatment applied. This is a common visual marker to include on websites to help remind the user where they are on the site. It’s not absolutely necessary, but it’s a nice bit of helpful UX.

Let’s get started!

3 Beautiful CSS Hover Effects You Can Add to Your Divi Menus

Subscribe To Our Youtube Channel

Theme Customizer Settings

First off, for all the styles we’re going to be using the default settings for header format. If you’ve just installed Divi you don’t need to configure this setting, it should be set to this automatically.

Style One – Growing line underneath

In this menu style, we’ll be adding a line that appears to grow from left to right directly beneath the menu item being hovered over. It will also set a static line directly beneath the active page link.

Inspiration

This is a really nice effect that can work well on pretty much any kind of site, plus editing the code for this style to change the color and line width is pretty easy for any level user. It’s a pretty popular hover effect that I’ve seen on sites for years. I think its subtlety is what makes it so versatile, it can be used on a real estate site as well as a musician’s site and everything in-between.

Implementation

Add the following code to your child stylesheet OR to Divi theme options > general > custom CSS box:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content"";
 positionabsolute;
 z-index2;
 left0;
 right0;
}
#top-menu li a:before {
 content"";
 positionabsolute;
 z-index-2;
 left0;
 right100%;
 bottom50%;
 background#15bf86/*** COLOR OF THE LINE ***/
 height3px/*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right0;
}
#top-menu li li a:before {
 bottom10%;
}

Style Two – Thick “boxy” look with line underneath

In this menu style, we’ll be placing a large “blocky” line that animates down from the menu section beneath the menu item the mouse is hovering over. It also places a chunky box over the active menu link.

Inspiration

I use this style myself on a Divi child theme I developed called Executive (I’ll link to the demo below so you can see the hover in action on a real site). Visually this is not as subtle as the first style, I think picking the right site to use it on would be key. It’s important to match any type of small design detail like a hover effect to the overall feel of the site.

Implementation

Add the code below to your child theme’s stylesheet or to Divi’s custom CSS box under the Theme Options general tab. As far as ease of editing the color is very easy to change, but if you plan to change the width of the border you’ll find you’ll need to play with the other numbers in the CSS as well.

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important/*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border10px solid #F15A29/*** COLOR AND THICKNESS OF THE BOX ***/
 padding10px;
 margin-bottom-10px;
}

Style Three – Background colored buttons

This menu style turns the menu items into buttons with coordinated hover colors. It also gives another, separate color, to the active menu link.

Inspiration

This is inspired by buttons, of course, 😀 I really like the way button navigation looks. I also think like style one it’s a pretty versatile look that could work on almost any site. Changing the background colors is pretty easy peasy as well.

Implementation

As with the other two styles above, you’ll want to add the custom CSS code below to your child theme’s stylesheet or to the custom CSS box in Divi’s general theme settings tab. You can make your own tweaks and changes to the code (such as colors) by adjusting values next to the commented portions of the code.

.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
 padding-bottom15px;
}
#top-menu li {
 padding-right5px;
}
#et-top-navigation {
 padding20px 0 !important;
}
#top-menu li a {
 background#C1B2AB/*** CHANGES THE BACKGROUND COLOR ***/
 padding15px 20px;
 border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
 color#fff !important;
}
#top-menu li a:hover {
 background#559CAD !important/*** CHANGES THE BACKGROUND COLOR ON HOVER ***/
}
#top-menu li.current-menu-item > a {
 background#edc77b/*** CHANGES THE BACKGROUND COLOR OF THE CURRENT PAGE LINK ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
 contentnone;
}

Examples of These Styles on Divi Sites “In the Wild”

Here are some examples of these styles (or very similar) being used on live Divi websites.

Complete Elevator Service

This site has the thin line treatment being used elsewhere on headings, so the hover style is being tied into the overall look so that it makes sense.

View the Complete Elevator Service Site

The Executive Premium Divi Child Theme

Like in the example above the style of the thick line is being used elsewhere on the site so that the different design elements complement each other.

View the Executive Premium Divi Child Theme

Endure Web Studios

Okay so I had a really hard time finding a site that was using buttons for every menu link. I wrote the CSS just for this tutorial, but Endure shows a popular use of making one link look like a button, so the third style in this tutorial is just taking that idea and using it for all nav links.

View the Endure Web Studios Site

Wrapping Up

We hope you can find some use for one or even all of these menu hover styles on your Divi websites.

Something great about using snippets from tutorials like this is the fact that even the most beginner-level user can easily implement them, giving the most basic site that much needed boost of custom design. And even though technically none of them are actually using an animation function, it gives the feel of something being animated, which is hugely popular and trendy these days.

Let us know in the comments below what you’d like to learn about next. And be sure to subscribe for more easy-to-implement Divi tutorials from Elegant Themes!

119 Comments

  1. Love it Leslie.
    My only problem is… which one to choose 🙂

  2. I liked the first one but my menu has several subs so it doesn’t appear unless you hover over the sub menus. But it’s fun to play with.

    What I’d really like is figure out how to change the color of the text for the active menu item. Instead of a colored underline, how would I go about changing the color of the text?

    Thanks!

    • Hi Bud! You can set the active link color in the customizer. Go to header & navigation > primary menu bar > active link color and set it there. You can do it in the fixed settings as well if you’re using a fixed header.

      • Thanks, Leslie. See…I just had ask!

    • Nevermind…I just found it! I’ve noticed that often things do show up until I ask someone (usually my wife) where it is! LOL

  3. That’s class. This entire blog is really helpful. Thank you very much and keep it up!

  4. Wouah… Thank you

  5. I was googling for ages tonight for a way to change the hover colour for the menu. I then found some resources for cool Divi hover effects, but none that I really wanted. I was just about to give up and then your newsletter arrived in my inbox and BAM!! My hover effect situation is now sorted! Thank you ever so much, I love your emails 🙂

  6. Truly fantastic. Thanks a lot.

  7. I really like No 2! Thank you so much.

  8. This is great! Unfortunately, it doesn’t work for the full-width menu module, does it? I’ve been kind of doing that lately, using the blank page and setting up my own modules for header, menu, and footer. It just feels like I have more control and options that way. Thanks!

    • I’m actually also interested in a way to do it on the full-width menu. Any idea ? Thank you in advance ! 🙂

    • I’m actually also interested in a way to do it on the full-width menu. Any idea ? Thank you in advance ! 🙂

    • Hi Steve,

      I’m using the fullwidth menu module and was able to make it work with a little tweaking. I utilized #2 and did the following:

      1. In the fullwidth menu module add a custom CSS Class. (I used menu)

      2. Then in the epanel change #top-menu to simply .menu

      I only wanted the active underline so this was the code I used:

      .menu li.current-menu-item > a,
      .et-fixed-header #top-menu li.current-menu-item > a {
      box-shadow: 0 2px 0 0 #FFFFFF;
      padding: 4px;
      margin-bottom: -10px;
      }

      You can see the changes on tomsterner.com

  9. Please! Let have nice effects for mobile menus!!

  10. Thank you, very helpful stuff. I would like to suggest a post on how to get your news feed into the dropdown mega menu area with pictures and excerpts in Divi. Similar to how the top menu works in the Kinja universe: http://deadspin.com/

  11. Great article! When I go to my theme customizer options there is no option to change anything? Any idea why this might be the case? Thank you!

  12. This would be cool if we could use it for Extra themes

  13. Would love to the background buttons style on our Extra-themed site. Any changes that would need to be made to make these work with Extra?

    Thanks!

    • Have the same question/request…

    • I have the same problem. If I select the top level menu item then all sub-menu items are underlined, but if I select a sub-menu item, then it works correctly.

    • Hi Joseph, that’s strange because I’m using the CSS from the Complete Elevator site I built and it’s working as it should there with sub items. I’ll look into what’s causing this 🙂

    • I have the same problem. Also I wasn’t getting a space between the line and the Menu Item. I fixed that with some additional padding CSS.

    • I have the same problem. The lines are working with submenu items, as long as you are not on the parent page. When clicking the parent item, then after opening the new page all submenu items of this active item are permanently underlined.

      • Hi, I have the same problem. Is their a solution to fix it?

        • Not yet, I’m afraid…

    • I have the same issue here too.

      So I checked your elevator theme and found that there it happens too.

      When you choose Services ->New Installations both submenues (Hydraulic Elevators, Traction Elevators) are underlined like in Joseph’s example.

      • Sorry guys I’m not seeing any difference in the code and it’s working on the Complete Elevator site for me. Not sure if maybe it’s a browser issue. I checked on Chrome, Firefox and Safari, all at latest versions.

  14. This is really a great and useful post Leslie, thanks a lot!!

  15. Leslie, you never boring. Always bring good stuffs. Thanks

  16. Fantastic Job Leslie ?, I agree with kwabsgops you bring the good stuffs.

  17. Hi Leslie, Great Post, thanks for this info. I’m currently using number 1.

    Just one thing, when I hover over my logo it also shows the line, how can I disable it from working on the logo? I’m using centered inline logo format.

    Regards

    • Hi Hiram, change this line:
      #top-menu li a:before {

      to this:
      #top-menu li:not(.centered-inline-logo-wrap) a:before {

      that should fix it.

      • Hi your correction does stop the logo being underlined but now on the sub menu list the hover is centered through the middle of each sub menu link – worked correctly just using #top-menu li a:before {

        Any way to fix that?

        Nice article by the way! 🙂

      • Hi Leslie,

        These are fantastic! Thank you!
        I’m using Number One with the Centred Inline Logo so added the extra snippet you just gave to Hiram. It works great, but also caused the underline in the drop down menu to go through the centre of the text (like a strikethrough) rather than underlining those submenu items like it was before.
        Could you suggest a fix?
        Many thanks

        • Tried changing the line
          #top-menu li li a:before {
          as well, and it worked!

          Hadn’t realised I needed to change this line with the ‘double li’ as well.

          • Thanks a lot Leslie, that solved the logo issue.

            And thank’s to you Faith, the drop down menu is also working changing the “li li” part.

      • Hi Leslie,

        I’m trying to disable social links and a CTA button from getting underlined. I’ve added the :not rule to everything but I still can’t make it to work. Any suggestion?

        Here is the code with just the social class:

        #top-menu li:not(.menu_social) a:before {
        content: “”;
        position: absolute;
        z-index: -2;
        left: 0;
        right: 100%;
        bottom: 50%;
        background: #ff2448;
        height: 2px;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        }

        #top-menu li:not(.menu_social) a:hover {
        opacity: 1 !important;
        }

        #top-menu li:not(.menu_social) a:hover:before {
        right: 0;
        }

        #top-menu li li:not(.menu_social) a:before {
        bottom: 10%;
        }

        thanks!
        Gal

via 3 Beautiful CSS Hover Effects You Can Add to Your Divi Menus | Elegant Themes Blog

%d bloggers like this: