change hover color on the navigation

  • I want to overwrite this : 

    "core/navigation": {

                "elements": {

                    "link": {

                        ":hover": {

                            "typography": {

                                "textDecoration": "underline"

                            }

                        },

                        "typography": {

                            "textDecoration": "none"

                        }

                    }

                },

                "typography": {

                    "fontWeight": "500"

                }

            },




    to this : 

    "core/navigation": {

? ? ? ? ? ? ? ? "elements": {

? ? ? ? ? ? ? ? ? ? "link": {

? ? ? ? ? ? ? ? ? ? ? ? ":hover": {

? ? ? ? ? ? ? ? ? ? ? ? ? ? "typography": {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "backgroundColor":  "red",
                                "color" : "white"

? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? ? "typography": {

? ? ? ? ? ? ? ? ? ? ? ? ? ? "textDecoration": "none"

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? "typography": {

? ? ? ? ? ? ? ? ? ? "fontWeight": "500"

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

    but when I try it , I see still as hover the old underline .

    What did I do wrong here ?

Viewing 2 replies - 16 through 17 (of 17 total)
  • Anonymous User 17785837

    (@anonymized-17785837)

    @roelof I’ve found the answer.

    You don’t need a child theme or to alter the theme.json file.

    Go to the site editor, click on the global settings icon. then underneath you will see where it says Styles. To the right of that, click on the three vertical dots and select Additional CSS from the drop-down, then paste in the following code:

    header .wp-block-navigation-item__content{color: #FF0000 !important;}
    header .wp-block-navigation-item__content:hover{color: #00FF00 !important; text-decoration: none;}

    Obviously, Change the hexcodes to suit.

    Hope this works for you.

    I have also had this situation, pretty frustrating. After much time and effort I had to resort to this is css:

    header .wp-block-navigation-item__content:hover{color: #FDEBD2 !important;}

    Whoops, missed the above post, but echo same exact result!

Viewing 2 replies - 16 through 17 (of 17 total)
  • You must be logged in to reply to this topic.