Personalise menu text color

  • Akasashasha

    (@akasashasha)


    2 years ago

    Hello dears,

    I would like each title in my menu to have a different color (as each one reflect a different service with a different color associated with it).

    For example the first item in the menu is about gardening so I want its text green, the second item in my menu is about recycling and I want its text black, etc … did not found any add on, plugin to do that … any idea ?

    thanks a lot

    Akasashasha

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can do this with custom CSS code. But we’ll need to see your site before we can offer any CSS code.

    Are you able to share your site address?

    Thread Starter Akasashasha

    (@akasashasha)

    thanks Georges for your answer but I can’t share the url of the website right now as it is not mine, it’s in dev still and not yet open to the public.

    For your info I’m using the Astra free theme (might go for the Pro version soon) and have created already a child-theme for customisations.

    Moderator bcworkz

    (@bcworkz)

    The reason we’d like to see an example page is we’d use our browser’s element inspector tool to see what sort of selectors are available for applying CSS rules to specific DOM elements. You could do this for yourself. Each menu item typically has a unique ID attribute like id="menu-item-123". For each unique ID, you could apply a rule like:

    #menu-item-123 {
    background-color: green;
}

    You can try out such a rule right in the element inspector to confirm it’s the rule you want. It will not persist in the tool after reloading. When you’ve found the right rule that works in the tool, copy/paste it into the customizer’s Additional CSS section. Or paste into the child theme’s style.css file. Either way will work.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Personalise menu text color’ is closed to new replies.