change hover color on the navigation

  • roelof

    (@roelof)


    2 years, 3 months ago

    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 18 total)
1 2
  • Moderator jordesign

    (@jordesign)

    2 years, 3 months ago

    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)

    2 years, 3 months ago

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

    Moderator jordesign

    (@jordesign)

    2 years, 3 months ago

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

    Thread Starter roelof

    (@roelof)

    2 years, 3 months ago

    yes those are the colors I wanted to see

    Moderator jordesign

    (@jordesign)

    2 years, 3 months ago

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

    Thread Starter roelof

    (@roelof)

    2 years, 3 months ago

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

    Moderator jordesign

    (@jordesign)

    2 years, 3 months ago

    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)

    2 years, 3 months ago

    @jordesign Is this in the theme.json file?

    Moderator jordesign

    (@jordesign)

    2 years, 3 months ago

    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)

    2 years, 3 months ago

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

    Moderator jordesign

    (@jordesign)

    2 years, 2 months ago

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

    @peaky56 – correct, thiswould be in theme.json

    Thread Starter roelof

    (@roelof)

    2 years, 2 months ago

    NP

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

    Moderator jordesign

    (@jordesign)

    2 years, 2 months ago

    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.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/

    Anonymous User 17785837

    (@anonymized-17785837)

    2 years, 2 months ago

    @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)

    2 years, 2 months ago

    Sorry, also no luck.

Viewing 15 replies - 1 through 15 (of 18 total)
1 2

The topic ‘change hover color on the navigation’ is closed to new replies.