fix navbar link hover color invisible on white background

[pateldhruv26]

Description

The navbar has two states:

• Dark background (top of page): nav links are white — correct
• White background (after scrolling): nav links should be dark

When .navbar-bg-onscroll is active (white background), hovering
over nav links was triggering .navbar-dark's hover rule which set
text color to white — making links invisible (white text on white background).

Root cause: The original code only handled &:hover:focus
(both simultaneously) but was missing separate &:hover and &:focus
rules. So a simple hover had no override and .navbar-dark took over.

Fix: Added separate &:hover and &:focus selectors with
$medium-grey !important to override .navbar-dark correctly.

Issue

Closes: #54938

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: pateldhruv26 / name: Dhruv Patel (3b099c8, 89b02b7)

[k8s-ci-robot]

Welcome @pateldhruv26!

It looks like this is your first PR to kubernetes/website 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes/website has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign salaxander for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	89b02b7
🔍 Latest deploy log	https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/69b9a6ffcfdd8000080813b1
😎 Deploy Preview	https://deploy-preview-54946--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pateldhruv26]

Preview tested at the Netlify deploy link above. (link: https://deploy-preview-54946--kubernetes-io-main-staging.netlify.app/)

Navbar hover color is now correctly visible on white background.

[pateldhruv26]

Updated the fix based on reviewer feedback:

• Removed separate &:hover and &:focus from inside the block
• Removed !important on hover color
• Added nav.navbar-bg-onscroll as a standalone higher specificity
  selector to cleanly override .navbar-dark hover color

Before: specificity 0,3,1 (.navbar-dark was winning)
After: specificity 0,3,2 (nav.navbar-bg-onscroll wins cleanly)

Tested locally — fix works correctly without !important

[Caesarsage]

Thanks LGTM

[lmktfy]

This doesn't seem to match the description, which mentions a removal. I don't see any code / stylesheet lines being removed.

PR #54943 seems like a tidier fix - maybe that one is better to merge.

[lmktfy]

BTW
/retitle fix navbar link hover color invisible on white background

[pateldhruv26]

Thanks for pointing that out! I've updated the PR description
to accurately reflect the current fix.

Both PRs solve the same bug.If #54943 is preferred I will close mine, or keep iterating if
there's a path to merge this one.

[Caesarsage]

PR #54943 seems like a tidier fix - maybe that one is better to merge.

I agree, I think so too

[lmktfy]

As #54943 has merged:
/close

[k8s-ci-robot]

@lmktfy: Closed this PR.

Details

In response to this:

As #54943 has merged:
/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.