[Theme ] Change color of one menu item and increase size of menu text on mouse over

Hi! How do I change the color of only one menu item? If you look at the page the menu item "Kontakt" i would like to change color of that item red.
Another question is how do I implement increase size of text(Menu items) on mouse over?

  • Predrag Dubajic

    Hey Boris,

    Hope you're doing well today :slight_smile:

    I'm not familiar with the theme you are using so I'm not sure if any of the stuff you're after can be done from the theme settings but I can help you with providing CSS code that will do this.

    About the menu item color, each menu item has unique ID so we can use that to apply the color to single element, using this CSS code should do the trick for you:

    #menu-item-586 > a {
        color: #f00;
    }

    You can of course adjust the HEX value if you want to use different kind of red for that menu item.

    As for changing font size you can use this CSS code:

    .menutop .menu-item > a:hover {
        font-size: 16px;
    }

    Note that you can increase it only by one pixel (to 16 pixels) because anything above that will cause menu items not to fit in the same row and cause your site to act wonky on hover.

    WordPress offers Custom CSS field inside Appearance > Customizer but if your theme disables this and it doesn't have its own CSS field you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.