DIVI主题导航栏适配与悬停样式异常问题技术求助

Hey there! Let's tackle these two navigation bar problems with your Divi theme step by step:

1. Stop PLATFORM Button from Wrapping on 1056px–1346px Screens #

The button wraps because the total width of your navigation items exceeds the available space in this screen range. We can adjust spacing or tweak item sizes using a media query to fit everything in one line.

Add this CSS to your Divi Theme Options > General > Custom CSS (or your child theme's stylesheet):

/* Adjust navigation spacing for 1056px–1346px screens */
@media (min-width: 1056px) and (max-width: 1346px) {
    .et_pb_menu__menu-item {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Optional: If spacing isn't enough, shrink font size slightly */
    .et_pb_menu__menu-item a {
        font-size: 14px;
    }
}

• Tweak the padding values to find the perfect fit where all buttons stay in one line.
• The font size adjustment is a backup if spacing alone doesn't solve the wrapping issue.

2. Fix Hover Text Color for DONA/PLATFORM Button Corners #

This happens because the hover state is applied to the parent button container, not just the text link—so even hovering the button's edge triggers the white text. We'll target the specific link elements for these two buttons to override the color.

First, use your browser's dev tools to inspect the DONA and PLATFORM menu items and grab their unique classes/IDs. Then add this CSS:

/* Override hover text color for DONA and PLATFORM buttons */
.et_pb_menu__menu-item--dona a:hover,
.et_pb_menu__menu-item--platform a:hover {
    color: #FFD700 !important; /* Yellow - swap with #007bff for blue */
}

• Replace et_pb_menu__menu-item--dona and et_pb_menu__menu-item--platform with the actual classes/IDs you found via inspection.
• Swap the color code to blue (#007bff) if that's your preference.
• The !important ensures this style overrides Divi's default hover text color.

If you don't want to mess with unique classes, you can target buttons by their text (note: this breaks if you ever change the button text):

/* Alternative: Target buttons by their text content */
.et_pb_menu__menu-item a:contains("DONA"):hover,
.et_pb_menu__menu-item a:contains("PLATFORM"):hover {
    color: #FFD700 !important;
}

内容的提问来源于stack exchange，提问作者Adri Salazar