Different colours in navigation block

  • Resolved marizakwp

    (@marizakwp)


    1 year, 7 months ago

    Hello, I want to make each item of a navigation block in theme twenty twenty four, with different colours.
    But in the right side panel there isn’t an attribute for colour for each item. Can anyone help me?
    Thank you very much!
    Mariza

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    1 year, 7 months ago

    As you’ve discovered, the nav block does not support styling to that level of detail. You’ll need to add your own custom CSS to get different colors for each item. You can use CSS’ :nth-child() pseudo-selector to target each element individually. You can use your browser’s element inspector tool to help come up with the right CSS. Changes in the inspector do not persist. Once you’ve come up with the right CSS, copy/paste it into the Style Book’s Additional CSS section.

    Thread Starter marizakwp

    (@marizakwp)

    1 year, 7 months ago

    Thank you so much @bcworkz! I will try that

    Thread Starter marizakwp

    (@marizakwp)

    1 year, 7 months ago

    I tested the :nth-child() CSS but it didn’t work. In fact any other CSS I’ve tried didn’t work.
    I think there is a CSS for the navigation block that overrides the individual CSS that I try to assign

    Moderator bcworkz

    (@bcworkz)

    1 year, 7 months ago

    I added the following to the Additional CSS section of the site editor style book for my site and it works as expected with 2024 theme:

    ul.wp-block-navigation li:nth-child(2) {
    color: red;
}

    CSS added to Additional CSS generally appears after built-in core and theme styling, so equivalent rules should take precedence by being later in the page load.

    If you did something similar, maybe your site’s CSS has been cached somewhere and that cache needs to be flushed. Could be a caching plugin, some other server side cache, or possibly your browser’s cache. Try clearing them all.

    ETA: The style does not get applied in the editor, but it does get applied on the front end.

    • This reply was modified 1 year, 7 months ago by bcworkz.
    Thread Starter marizakwp

    (@marizakwp)

    1 year, 7 months ago

    Thank you so much!!
    It worked! Yay!

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

The topic ‘Different colours in navigation block’ is closed to new replies.