Menu Showing Interaction Font Color For Menu Items With Sub-Menus Even When Not Interacting

[NMWeb]

I’m running into an odd issue I need your help investigating.

I have a two page site in which one page is English and the second page is Spanish. Beyond that the two pages are built identically.

The English page is set as the Front Page and the menu consists of all same page navigation links with only one exception (the “Español” item goes to the Spanish page). It works exactly the way I expect. When there is no interaction it looks like this:

When I interact it looks like this:

So far so good. The problem is with the Spanish page. Though the header is a duplicate of the English header with only the menu it points to being different the interaction font color for the top links with sub-menus shows even when there is no interaction. Same for the sub indicators (they show the interaction color). As the interaction color for both is white it makes the menu items invisible. Even stranger, the one menu item that is also a same page navigation link but doesn’t have a sub-menu appears exactly as I would normally expect - it doesn’t show the interaction font color unless I hover or am on that section of the page. Here is a screenshot of how it looks without any interaction:

Here is a screenshot of how it looks when I hover over an otherwise invisible menu item:

I will include login credentials for you in a secure note so you can investigate further.

[marc_a]

Hi @MediaDeskNM,

Thanks for reaching out.

For some reason, there’s a class inside the <a> tag of your Spanish page that is not available on your English page and I don’t know where it coming from. So, I find another way to override the styling of your current Spanish page to make the same with your English page.

Here are the things I did:

First:
I added a class name spanish inside the bar of your Spanish menu.

Then second, I added this line of CSS code in your header Spanish:

.spanish .e847-15.x-menu > li > .x-anchor .x-anchor-text-primary{
      color: rgb(0,0,0) !important;
}
.spanish .e847-15.x-menu > li > .x-anchor .x-anchor-sub-indicator {
      color: rgb(249,129,37) !important;
}
.spanish .e847-15.x-menu > li > .x-anchor.x-interactive .x-anchor-text-primary,
.spanish .e847-15.x-menu > li > .x-anchor.x-interactive .x-anchor-sub-indicator{
  	 color: rgb(255,255,255) !important;
}

Please note that custom development is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Hope that helps.

Thank you.

[NMWeb]

Thank you this was very helpful.

[prakash_s]

Hi @MediaDeskNM

Glad to help you.

Thanks