Header Top Links stuck in active status


All of the top links should be white, but are a dark red due to active link styling. What is causing this?

Hello Justin,

Thanks for writing to us.

To change the menu item color you need to go to the Navigation element —>Top Link—>Primary—>Color

Please have a look at the given screenshot below.

Thanks

Greetings, I have the header TOP LINKS color defined as white, however, on my homepage they display as a dark red.

Hello Justin,

In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot common issue before we investigate your settings.

  • WordPress Login URL
  • Admin level username and password
  • Exact Header URL

You can find the Secure Note button at the bottom of your posts

Thanks

Secure note

Hi Justin,

I have checked your Appearance > Menu and found that you have added a / in front of the Menu link, which is the reason behind your issue. I went ahead and remove that and now the color is implemented to the menu item.

Screenshot-2022-03-02-155242

Thanks

Greetings,
I understand. The problem is that now those anchor links will not work when a user is no longer on the home page.

Hi Justin,

The One Page Navigation menu can’t work in the multi page environment.

Thanks

Can you please elaborate on “can’t work” ? Anchor links on a multi-page site function, it is the styling that is the issue.

Hi Justin,

The One Page navigation menu item has the # link ad it found the section on the same page. If that is used in the Multiple page environment, in other pages where the section with the ID is not available the menu does not work. That is what I was referring to.

Thanks

Is there CSS code that can be added to override?

Hi Justin,

Although there is no custom CSS code to override these, still you can try by adding the following custom CSS code into the Theme Options > CSS.

.x-always-active .x-anchor-text-primary
{
color:rgb(255,255,255) !important;
}

.x-currently-active .x-anchor-text-primary
{
    color:rgb(91,0,0) !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

Thank you. I just wanted to know if it was possible. I added

.x-anchor-text-primary:hover
{
    color:rgb(91,0,0) !important;
}

To get the desired effect.

Hi Justin,

Glad that we are able to help you.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.