Different colors for individual menu items

Hi @spade – the link to your site doesn’t seem to be working.

You can change the text colour of individual menu links with some custom CSS.

First, select the first link whose colour you want to change. Open up the Advanced panel in the block settings sidebar, and add your first unique custom class, such as my-special-link – as you see here:

Then, go into the site-wide CSS editor and add custom CSS to match the custom class you just created, replacing the colour code with whatever you wish:

/* Menu class 1 */
.my-special-link {
    color: #bb00bb;
}

You can repeat the process for as many other menu links as you like, making sure each custom class is unique and that the class matches the CSS you add in the custom CSS editor. You might want to use my-special-link1, my-special-link2 , etc.

Let me know how it goes.

• This reply was modified 1 year, 3 months ago by Kathryn Presner. Reason: fixed typo

Hi Kathryn,

same problem for me, but css-classes seems not to work. The custom class gets overruled by

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
color: inherit;
}

Example:

https://spielwiese6.hanfverband-dev.de/

In the hamburger-Menu the item “Link 1.1” should be red.

I would like to style the first level (no urls) in another color as the items of the second level. Unfortunately I cannot use the existing css-classes for this, because they also effect the normal Desktop Menu. And the Block-setting for “navigation” unfortunately don’t help.

text-color effects the Hamburger-Icon + all levels of the hamburger-menu including submenus ( what I really don’t understand?) and submenu & overlay-text effects not the Icon but also all levels of the menu.

Best regards

Chris

Hi @christianmuellerdhv,

I’m not sure if I fully understand, but it looks like you want to change the color only of the submenu items:

.wp-block-navigation__submenu-container span {
    color: red;
}

You can add this CSS by going to the Site Editor, then Styles. There you can click on the three-dot icon (kebab menu) and go to Additional CSS:

Full Size: https://d.pr/i/Yox1tm

By the way, if you need further help, please do create your own new topic, so we can check this further.

Hi Felipe,

thank’s, I will open a new topic, because this code is affecting all menu-styles, also desktop, what is the problem….

Greeting

Chris

Hey @christianmuellerdhv! You can always put any custom css inside a media query to have it only apply on certain screen sizes, like mobile devices. As an example, you can do this, which will only make your custom css affect devices with width of less than 600px (most mobile devices)

@media(max-width: 600px) {
// any custom css code here
}