How to style just one menu item for the user account menu

Hello,

I would like to style the text color and background of just one item on user menu account. Is this possible using css?

I would like to make it white text color with green background

I inspected the item and it has this class

Screenshot_163

it is located here:

I tried using this css code for testing

.hp-menu_item hp-menu_item--verificar-perfil  {
color: #228C22;
}

but it didnt change anything, not even the text color.

Is it wrong or missing something? I am trying to emulate a green button style, with white text

Please try this CSS snippet instead, but please note that it can require further customization. If you are not familiar with the code customization then please consider hiring someone for custom work https://fvrr.co/32e7LvY

.hp-menu_item.hp-menu_item--verificar-perfil  {
    color: #228C22;
}

Hi @yevhen unfortunately the code doesnt change the text :disappointed:

Try

li.hp-menu_item.hp-menu_item--verificar-perfil {
    background-color: #228C22;
}

li.hp-menu_item.hp-menu_item--verificar-perfil a {
    color: #fff;
}
2 Likes

Hi @donarkanio thank you… but it doesnt make any changes also. I wonder if something is missing on the code?

I have a plugin “Yellow Pencil” but I can only style all menu itens at the same time, so I was hoping it would be possible using css to style just one item

The error may be somewhere before. For example, with a closing parenthesis or an inserted comment.

Please try this CSS snippet instead

.hp-menu_item.hp-menu_item--verificar-perfil a{
    color: #228C22 !important;
}
1 Like

haha @yevhen thank you… I was thinking I was crazy… but it just doesnt work.

None of these codes work, the menu doesnt want to be disturbed and wants to remain as it is :sweat_smile:

Please make sure that you have added custom CSS code snippets to Appearance/Customize/Additional CSS field

Also, please make sure that this menu has the correct class name which you have provided in your code snippet

Also, if you use a caching plugin, make sure that caching is disabled for logged-in users

If the issue persists and if it is possible then please provide the website link