Menu underline wrong behavior when menu links contains same-page anchor (#)

Dear,

Please check the link and attachment.

If a menu contains multiple links with the same page but different anchro, those links get underlined in the menu although the anchor isn’t in the URL (no clicked on it).

Can you please improve so that we underline only the anchor menu link when it’s in the URL? If the anchor isn’t in the url, then it shouldn’t be underlined. Otherwise it’s confusing and not logic for visitors.

Thanks
Simon

Attachments:

You must be logged in to view attached files.

Hello,

Try to check how it works with some default WordPress themes like TwentyTwentyOne.

Kind Regards

Dear Bogdan,

How do you want me to check this in another theme when this Underline style is specific from Woodmart theme?

Regards
Simon

This issue is not caused by Underline style or Woodmart theme in general. When the page is opened in the browser active page menu item is marked with “current-menu-item” class. When a menu item is hovered or has a current menu class it is highlighted with different color or underline depending on which design is chosen. In your case, you have a menu with three menu items that are linked to one page, and when this page is opened they all have “current-menu-item” class (https://prnt.sc/QatI87YfSylW).

Only one reason this problem is related to Underline style is that with this style it is easier to see. As we suggest in the previous reply, you can switch your site to the default “TwentyTwentyOne” which has a similar underline active\current menu style, and see that it looks almost identical with the same menu configuration (https://prnt.sc/MkeKJ93val9G).

All of this is the default WordPress functionality and it can’t be changed via theme.

The only solution in this situation is to use the default menu style to make this issue less visible or use the following custom code to remove underline style on “current” menu items:

body .wd-nav[class*="wd-style-underline"]>li.current-menu-item:not(:hover)>a .nav-link-text:after {
	width: 0;
}

body .wd-nav[class*="wd-style-"]>li.current-menu-item>a {
	color: var(--nav-color);
}

Kind Regards

[Author]

Posts