3D flipping navigation menu using CSS

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

This tweak will turn Divi’s menu into a 3D flipping menu, adding a little animation and character to your website.

View the demo

As you can see from the demo, the flipping effects are fun and look great. You can do black and white or incorporate different colors. I do have to give credit to the original source, which is 95% of the menu code.

This tweak has been updated to work with versions of Divi 2.4 and up. For older version of Divi, please scroll down for the legacy tutorial.

The first thing we need to do is add the jQuery script I’ve created to simplify the process. In the original tutorial, I was hard coding the menu into the header.php file. Using jQuery, we can avoid this and add the necessary classes and containers without bypassing Divi’s menu. This means you can create your menu as normal in the dashboard. The following script will do all of the work.

Place the script either in the Epanel->Integration tab in the “Add code to the <body>…..” section or directly in the header.php file of your child theme. If you add it to the header, you’ll want to paste it just above the </head> tag:

 CSS

Add the following to your stylesheet:

 

You can use the .front selector in the styles above to change the font and background colors before it flips and the .back selector to change the colors after it flips. I also limited the 3D effects to desktop only. On mobile, the menu should function and appear as it does in default Divi.

Below is the original tutorial for Divi 2.1:

Everything is done in CSS but there is one catch. Divi creates the menu using a built-in WordPress function. Since we need to add special class and span tags, we’ll have to bypass the function and create the menu manually. New pages will need to be manually added to this menu. It’s easy to do though so as long as that’s not a deal breaker, check out the final product below and let’s get started.

PHP

Locate this file: /themes/Divi/header.php

Make a copy of this file in your child theme or edit it directly

Find the following code near line 141:

Change it to this:

The link title is repeated three times for each link. The first occurrence is a fallback for older browsers. The second is within the “front” span class and is what you see before hovering. And the third is within the “back” span class and is what you see on hover. Nothing too complicated. Remember this will replace your auto-created menu and removes the ability to control the menu using the Epanel. Any changes will need to be made in the header.php file.

CSS

Locate your style.css file or edit within your child theme style.css

Add the following code:

This should work on Divi 2.1 and any theme by Elegant Themes for that matter. You may have to adjust the padding in .block-menu li a if you try this on another theme. You can adjust font colors and background colors by editing .back and .front. Enjoy and please feel free to leave comments if you have a better solution or a solution that would still allow control of the links from the Epanel.

    11 Comments

  1. Thanks, dont work in Divi 2.5, how to do…. thanks

    Belay

    December 9, 2015

    • Hi Belay. I’ve updated the tutorial to work on Divi 2.4 and up. Tested on Divi 2.5.6 and works great. Check out the demo at the top of the post. Thanks

      Brad (admin)

      December 9, 2015

      • Hi Brad, Thank you for your quick response (very professional)
        it works at 100% in Divi 2.5 Merci-Thanks.

        Belay

        December 10, 2015

    • Add a closing tag } before /* ————End navigation animation————— */ and it will work.

      WZRD

      January 28, 2016

  2. Brad, how to modify the script for the drop down menu ( ‘#top-menu li ul li’)? thanks

    Belay

    December 10, 2015

  3. WPML dropdown selector is compatible? thanks Brad

    Belay

    December 11, 2015

    • Sorry for the late response but for anyone else interested. This tweak is probably not ideal for dropdown menus. I suppose you could modify it to show the dropdown menu on the flip. But to integrate it into this might be more work than it’s worth. This is more suited for a simple navigation menu.

      Brad (admin)

      March 15, 2016

  4. hi Brad
    i like your posts 3d flipping nav menu and.. I have one request for you..
    please tel us how do i use “JQuery Accordion Menu” in primary menu.. not in widgets..
    or how to create an “accordian menu” for divi…

    please give this tweaks…

    Rocky

    May 3, 2016

  5. Is there a way to add the js code in an external js file w/out conflicting with the mobile nav?

    fareedah

    September 24, 2016

  6. hey there, did not work on mobile for me, i am on divi 2.7.5

    Thanks

    macbroadcast

    October 19, 2016

  7. So I have had the legacy version on a site for years with an added code that puts the menu on the bottom until scroll then sticks it to the top. The new version does not work with my code. Any suggestions?

    Andrea

    March 22, 2017

Post a Reply

Your email address will not be published. Required fields are marked *