WordPress导航栏单个菜单项添加下划线方法咨询

Hey Harriet, I’ve run into this exact stubborn Elementor style override issue before—let’s break down how to get that single menu item underline working properly, without fighting the default styles.

Step 1: Grab the Unique CSS Class for Your Target Menu Item #

Elementor assigns a unique class to every menu item, and this is the key to targeting only the one you want. Here’s how to find it:

• Right-click the menu item you want to add an underline to → select Inspect (opens browser dev tools).
• Look for the <li> element wrapping the menu link—you’ll see a class like menu-item-123 (the numbers will be unique to your item). Note this down.

Step 2: Write High-Priority Custom CSS #

The problem you’re facing is likely that Elementor’s default styles have higher priority than your custom CSS. We’ll fix this by using the unique class + !important to force your styles to apply.

Option 1: Permanent Underline for the Menu Item

Paste this into your custom CSS area, replacing menu-item-123 with your unique class and adjusting colors/thickness to your liking:

/* Target specific menu item */
.menu-item-123 a {
  text-decoration: underline !important;
  /* Customize underline appearance */
  text-decoration-color: #ff4500; /* Replace with your desired color */
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* Space between text and underline */
  /* Fix the white text issue if you disabled Elementor's default colors */
  color: #333333 !important; /* Replace with your text color */
}

Option 2: Underline Only on Hover

If you want the underline to show up only when users hover over the item, use this instead:

.menu-item-123 a:hover {
  text-decoration: underline !important;
  text-decoration-color: #ff4500;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  /* Keep text color consistent */
  color: #333333 !important;
}

Step 3: Add the CSS in the Right Place #

You have two reliable spots to add this code:

• Directly in the Elementor Navigation Widget: Open your page in Elementor, select the Navigation Menu widget, go to the Advanced tab, and paste the code into the Custom CSS field.
• WordPress Customizer: Go to WordPress Dashboard → Appearance → Customize → Additional CSS and paste the code here. This often has higher priority than widget-level CSS.

Step 4: Clear Caches (Critical!) #

Elementor and your browser love to cache old styles, so after adding the CSS:

• Go to Elementor → Tools → General → click Clear Cache.
• Refresh your browser with Ctrl + F5 (Windows) or Cmd + Shift + R (Mac) to bypass browser cache.

Why This Works #

By using the unique menu-item-xxx class, you’re targeting only that one menu item instead of all links. Adding !important ensures your styles override Elementor’s default green underline or the white text fallback when you disable default colors.

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