• glasshalfpool

    (@glasshalfpool)


    It seems like trying to add a color and hover color to links in the navigation block doesn’t work in theme.json.

    For standard links the following works fine:

    "link": {
       "color": {
          "text": "var(--wp--preset--color--primary)"
       },
       ":hover": {
          "color": {
             "text": "var(--wp--preset--color--secondary)"
          }
       }
    }

    However applying the same styles to navigation block links does nothing:

    "core/navigation": {
       "elements": {
          "link": {
             "typography": {
                "textDecoration": "none",
                "fontSize": "var(--wp--preset--font-size--x-small)"
             },
             "color": {
                "text": "var(--wp--preset--color--base)"
             },
             ":hover": {
                "color": {
                   "text": "var(--wp--preset--color--contrast)"
                }
             }
           }
        }
    },

    I’ve checked this out across multiple sites with three different themes: a custom one i built, Frost and Twenty Twenty Four and all are doing the same thing.

    Inspecting the nav links I can see that the color applied is being inherited from somewhere and this is overwriting the style I am setting in on the navigation block.

    The only way to set the nav link color seems to be in CSS with an !important flag which is obviously generally considered bad practice, or by setting the color in the editor. However the nav block does not have a provision to add a hover color so I’d still have to do a hover state in CSS anyway.

    The page I need help with: [log in to see the link]

  • The topic ‘Can you change navigation link color in theme.json’ is closed to new replies.