Ready to elevate your DIVI website with a dynamic, responsive navigation menu? This advanced CSS snippet will not only enhance the aesthetics of your menu but also improve its functionality across various devices. We'll guide you through implementing a responsive navigation menu with animated hover effects.

@media only screen and (max-width: 980px) {

    #main-header .nav li a {

        font-size: 16px;

        padding: 10px 15px;



#main-header .nav li a:hover {

    color: #FFA500;

    transition: color 0.5s ease-in-out;


Breaking Down the Code:

@media only screen and (max-width: 980px): This CSS media query ensures the menu styling adapts for screens smaller than 980 pixels, enhancing mobile responsiveness.

#main-header .nav li a: Targets the navigation links within the main header.

font-size, padding: Adjusts the font size and padding of the navigation links for better readability and spacing on smaller screens.

:hover: This pseudo-class is used to define a special state of an element (in this case, when a user hovers over the navigation links).

color, transition: Changes the color of the navigation links on hover and adds a smooth transition effect for the color change.

Implementation Steps:

Accessing the DIVI Theme Options: Go to your WordPress dashboard, select "Divi," and click on "Theme Options."

Accessing the Custom CSS Box: Find the "Custom CSS" box under the "General" tab.

Adding the Code: Insert the CSS code snippet into the "Custom CSS" box.

Save Changes: Click "Save Changes" to implement your new animated, responsive navigation menu.

You will now see an enhanced navigation menu on your DIVI website, featuring a responsive design for different screen sizes and a sleek hover animation. This modification not only boosts the visual appeal but also improves user experience across devices.

Embrace the power of CSS to transform your website's navigation into a more engaging and user-friendly interface.