Make a menu link active in color in header PRO

Support
#19

Hello, do you think there is a way to make like a arrow at the end of the background ?

what i’ve got :

what i would like :

#20

Hi There,

Unfortunately, that is not a feature offered by X.

It could be done with custom development but would fall out of the scope of our support.

Thanks for understanding.

#21

Adding the code of Oct. 17th also makes all the sub items of the current menu item appear active. Is it possible to only change the appearance of the actual active menu item and not the submenu items?

Thank you!

#22

Hello There,

Thanks for updating this thread. Please have the code updated and use this:

/* For desktop version */
.current-menu-item > a > .x-anchor-text-primary {
    color: #8618d1 !important;
}

/* For mobile version */
.x-menu-collapsed .current-menu-item > a > .x-anchor-text-primary {
    color: #ffc300 !important;
}

If that does not work for you, please provide us the url of your site so that we can take a closer look at your site menu.

Please let us know how it goes.

#23

to date, It appears this issue has not been resolved. I just downloaded and installed Pro. Used it on two new sites and I just noticed this issue. I tried the codes on this post to no avail. This was a July post we are now in last part of December will there be an update to fix this bug soon?

#24

Regretfully, there is no solution to this yet but this has already been reported. We could not say when a fix will be released. The focus now is finishing the Template Manager feature. Once that is complete, our development team will focus on the bugs.

Thank you for understanding.

#25

Curious if there is a new solution to fix this?

#26

Hi again,

Regretfully we don’t have new solution yet but you can make use of following code:

/* For desktop version */
.current-menu-item > a {
    background-color: #c6c1c1 !important;
}

/* For mobile version */
.x-menu-collapsed .current-menu-item > a {
    background-color: #00b5fc !important;
}

Hope this helps!

#27

Hi There,

How can I make my nav link underlined when hovered on and stay underlined when selected?

#28

Hi,

To achieve that you can add this code in Theme Options > CSS

.x-navbar .desktop .x-nav > li > a:hover span, 
.x-navbar .desktop .x-nav > .x-active > a span, 
.x-navbar .desktop .x-nav > .current-menu-item > a  span{
      text-decoration:underline;
}

Hope that helps.

#29

I’m still having this issue - your custom CSS worked, but wondered if it is going to be fixed in the future.
Thanks
Dave

#30

Hi Dave,

Yes, I confirm the fix for this issue will be included in the next release.

Thanks.

#31

Hi There,

I’ve been experimenting with the codes in this topic, however, I can’t seem to make it work. Is it possible to keep the design from hovering over a link to illustrate the active link? (blue background and white text)?

My website is: https://frametest.knowledgeworker.dk

Regards
Carina

#32

Hi Carina,

That’s the CSS code you need to use in your case:

li.current-menu-item > .x-anchor .x-anchor-text-primary, li.current-menu-item > .x-anchor .x-anchor-sub-indicator {
    color: hsl(0,0%,100%)!important;
}

li.current-menu-item > .x-anchor {
    background-color: #1c8fc9!important;
}

Thanks.

#33

It works perfectly!

Thanks for real quick response :smiley:

#34

You are welcome :slight_smile:

#36

Hello,

I tried your code and it was working for a minute on desktop but destroyed my site on mobile.

/* For desktop version */
.current-menu-item > a {
background-color: #fff !important;
}

/* For mobile version */
.x-menu-collapsed .current-menu-item > a {
background-color: #00b5fc !important;
}

I deleted the code and deleted my cache and it seemed to fix the issue. I got rid of the mobile strip of code and just put in the desktop version and now I can’t get the white highlight back for the active links in my header menu. Would you mind helping?

Thank you!

#37

Hello There,

The code is not working for you because you have inserted an invalid code.

You must update it into this:

.excerpt{
   display :none;
}

.current-menu-item > a{
   background-color:#fff !important;
}

Please let us know how it goes.

#38

Ah awesome thank you! Silly error sorry.

#39

You are most welcome.