Make Link in Menu Look Different

Support
#1

Is there a way to make one link in your menu look different than the others in the same menu so it’s highlighted?

#2

Hello @POPFIZZ,

Thanks for asking. :slight_smile:

Yes, using menu id you can change the color of menu item so that it looks different from rest of the pack. You can add following CSS under X > Theme Options > CSS:

#menu-item-305 a {
    color: #000;
}

To find out menu id, you can take a look at following article:

You can also use Google Chrome dev tools to find our CSS selector. Please take a look at following video:

https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Thanks - so I added the following code to the CSS and it didn’t seem to change the menu color for the “Free Community” link:

}
#menu-item-916585 a {
color: #0C1D72E;
}

#4

Is the only option to change the color of the menu item? I saw one website where they had a box around it too. Was just curious. If it is, it’s fine.

#5

Hi,

Your code has low priority, you need Specificity in your css code. Please review link below.

To fix this, you can add a unique class to your menu item and target that in your css code.

Then add this in Theme Options > CSS

.x-navbar .x-nav-wrap .x-nav > li.my-link > a {
     color:#0C1D72E !important;
}

Hope this helps

#6

Thank you, I followed the instructions, but it didn’t change the color of the link. Maybe I need to name it something other than “my-link” in the CSS Classes box?

#7

Hello There,

The class placement and the code is correct. The hex code on the hand is invalid.
Please make use of this code instead:

.x-navbar .x-nav-wrap .x-nav > li.my-link > a{
    color:#C1D72E !important;
}

Please let us know how it goes.

#8

That worked! Thanks! :slight_smile:

#9

You’re welcome! :slight_smile:

1 Like
#10

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