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 15 replies - 1 through 15 (of 17 total)
  • Moderator jordesign

    (@jordesign)

    Hey @roelof,

    Does it work if you try this?

    "core/navigation": {

                "elements": {

                    "link": {

                        ":hover": {

                            "typography": {

                                "backgroundColor":  "red",
                                "color" : "white",
                                "textDecoration": "none"

                            }

                        },

                        "typography": {

                            "textDecoration": "none"

                        }

                    }

                },

                "typography": {

                    "fontWeight": "500"

                }

            },
    Thread Starter roelof

    (@roelof)

    Thanks for the help.
    The underline is gone but the colors are not applied.

    Moderator jordesign

    (@jordesign)

    Just to confirm @roelof – those colors are the ones you’d like to see on hover?

    Thread Starter roelof

    (@roelof)

    yes those are the colors I wanted to see

    Moderator jordesign

    (@jordesign)

    Hi @roelof – do those colors work any better if you define them with hex values? Like #ffffff and #ff0000 ?

    Thread Starter roelof

    (@roelof)

    Then the colors are still not working.
    I wonder if the typography is the right place to change the colors

    Moderator jordesign

    (@jordesign)

    Hi @roelof – that’s partially correct. The color is handled separately. Could you please try out this?

    "core/navigation": {
	"elements": {
		"link": {
			":hover": {
				"color": {
					"text": "white",
					"background": "red"
				},
				"typography": {
                    "textDecoration": "none"
                }
			}
		}
	}
}
    Anonymous User 17785837

    (@anonymized-17785837)

    @jordesign Is this in the theme.json file?

    Moderator jordesign

    (@jordesign)

    Hi @peaky56 – the impression I had from your initial question was that you were making these changes in theme.json – is that correct?

    If so – then this solution would be useful there ??

    Thread Starter roelof

    (@roelof)

    Sorry but I was the one that started this question not peaky

    Moderator jordesign

    (@jordesign)

    @roelof – you’re absolutely right, sorry about that ??

    @peaky56?– correct, thiswould be in theme.json

    Thread Starter roelof

    (@roelof)

    NP

    And the code does not work.
    I see no difference and no colors

    Moderator jordesign

    (@jordesign)

    I’m sorry to hear that @roelof. I’m afraid without being able to take a closer look it’s hard to be able to tell more.

    The best suggestion I have is to double check your approach with the guidance at https://developer.www.ads-software.com/block-editor/how-to-guides/themes/global-settings-and-styles/

    Anonymous User 17785837

    (@anonymized-17785837)

    @roelof Have you had any success with this issue?
    I’ve spent hours and hours on this and getting no where. I’ve read the global settings documentation @jordesign signposted us to, but still no joy.
    If I change the text colour in the page editor it changes the link colour as well, which I find weird.
    And I’m having no joy with the theme.json file in a child theme. I’m tired now, but will try to find time to post what I’ve tried so far, tomorrow.

    Thread Starter roelof

    (@roelof)

    Sorry, also no luck.

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