Solve Underlined Menu Links WordPress 6 Update

Solve Underlined Menu Links in Divi after WordPress 6.6 Update

Solve Underlined Menu Links WordPress 6 Update

WordPress 6.6 has brought an unexpected issue for Divi users and overall general WordPress users, causing all <a> links in the menu to appear underlined. This can be problematic, especially if you have custom CSS applied to your menus, as it disrupts the design and user experience of your website.

As a web developer managing multiple websites with custom CSS on their menus, encountering this error can be frustrating. However, there are steps you can take to solve underlined menu links WordPress 6 update (WordPress 6.6) effectively. Below, I’ll outline my best approach to tackle this problem.

Solve Underlined Menu Links in Divi after WordPress 6.6 Update
Solve Underlined Menu Links in Divi after WordPress 6.6 Update

Step 1: Prevent Automatic Updates

First, to prevent this issue from recurring with future updates, you can disable automatic updates in WordPress. This will give you control over when and how updates are applied to your site.

Add the following line of code to your wp-config.php file to disable automatic core updates:

define('WP_AUTO_UPDATE_CORE', false);

This line ensures that your WordPress installation does not automatically update to the latest version, allowing you to manage updates manually and ensure compatibility with your themes and plugins.

Step 2: Downgrade WordPress Version

Since the issue appeared after the update to WordPress 6.6, downgrading to a previous version that worked without issues can be a quick fix. You can use the “WP Downgrade” plugin, which is available in the WordPress plugin directory.

Here are the steps to downgrade WordPress:

  1. Install the WP Downgrade Plugin:
    • Go to your WordPress dashboard.
    • Navigate to Plugins > Add New.
    • Search for “WP Downgrade.”
    • Install and activate the plugin.
  2. Configure the Plugin:
    • Go to Settings > WP Downgrade.
    • Enter the previous WordPress version number you want to revert to (e.g., 6.5.3).
    • Save the changes.
  3. Downgrade WordPress:
    • Go to Dashboard > Updates.
    • You should see an option to reinstall the specified version of WordPress. Click on “Re-install Now.”

Step 3: Custom CSS Fix

If you prefer not to downgrade WordPress, but stiil want to solve underlined menu links WordPress 6 update (WordPress 6.6) as an additional measure, you can add custom CSS to remove the underline from menu links. This will override the default styling introduced in WordPress 6.6.

Add the following CSS code to your theme’s stylesheet or via the Customizer (Appearance > Customize > Additional CSS):


:root :where(a:where(:not(.wp-element-button))) {
    text-decoration: inherit;
}

This CSS rule targets the menu links and ensures they do not have an underline, maintaining the design consistency of your site. However, there are a few considerations and potential issues you may encounter:

  1. Caching Issues:
    • Ensure you clear your site’s cache and your browser’s cache after making CSS changes. Cached versions of your site might still display the underlined links.
  2. CSS Specificity:
    • If the underline persists, another CSS rule with higher specificity might be overriding your custom CSS. Inspect your site using browser developer tools to identify such conflicts and adjust your CSS accordingly, potentially increasing specificity or using !important if necessary.
  3. Child Themes:
    • If you are using a child theme, ensure the custom CSS is added to the child theme’s stylesheet to prevent it from being overwritten during theme updates.
  4. Third-Party Plugins:
    • Some third-party plugins might also add their own styles. Disable plugins one by one to check if any are affecting the menu links, and adjust their settings or add more specific CSS rules to override their styles.
  5. Theme Updates:
    • Future updates to Divi or your child theme might reintroduce the issue. Regularly check for updates and test your site on a staging environment before applying updates to the live site.
  6. Compatibility Issues:
    • Ensure that other customizations or plugins are not causing conflicts with the new CSS rule. Test your site thoroughly after applying the changes to identify and resolve any new issues that may arise.

Conclusion

By following these steps, you can effectively address the issue solve underlined menu links WordPress 6 update (WordPress 6.6). Disabling automatic updates and downgrading WordPress are immediate solutions, while adding custom CSS provides a quick fix for the visual problem.

Ensuring your site remains visually appealing and functional is crucial for maintaining a positive user experience. By taking control of your WordPress updates and applying targeted CSS fixes, you can prevent such issues from affecting your websites in the future. Always be vigilant for potential errors and configurations that may impact the effectiveness of your fixes, and be prepared to adjust your approach as necessary.

Want to optimize your Divi website? Here is how!

If you’d like to receive updates when I write an article join the Newsletter.