Skip to content

Fix navbar search contrast over light announcement banners - #56147

Merged
kubernetes-prow[bot] merged 2 commits into
kubernetes:mainfrom
NONAN23x:fix/search-bar-announcement-contrast
Jun 30, 2026
Merged

Fix navbar search contrast over light announcement banners#56147
kubernetes-prow[bot] merged 2 commits into
kubernetes:mainfrom
NONAN23x:fix/search-bar-announcement-contrast

Conversation

@NONAN23x

@NONAN23x NONAN23x commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Fixes #56074

What this changes

  • add a targeted navbar search style when an announcement banner is active and the navbar has not switched to its scrolled state yet
  • give the top-nav search input a visible background, border, shadow, and placeholder color so it stays readable over light announcement banners
  • leave the existing scrolled navbar styling unchanged

Testing

  • ran git diff --check
  • ran npm ci
  • ran make container-serve segments=en
  • verified the search input is visible on the home page and docs pages at widths above 1500px when the light announcement banner is present
  • verified the top-nav search remains hidden below 1500px
  • verified the scrolled navbar state still uses the existing styling

AI use disclosure

  • AI assistance was used to help draft and implement this change.
  • The final diff, wording, and local verification steps were reviewed before opening the PR.

@linux-foundation-easycla

linux-foundation-easycla Bot commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown

CLA Signed
The committers listed above are authorized under a signed CLA.

  • ✅ login: NONAN23x / name: Nomaan Jamaluddin (2647828)

@k8s-ci-robot k8s-ci-robot added area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes sig/docs Categorizes an issue or PR as relevant to SIG Docs. labels Jun 17, 2026
@k8s-ci-robot

k8s-ci-robot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Welcome @NONAN23x!

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 k8s-ci-robot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. cncf-cla: no Indicates the PR's author has not signed the CNCF CLA. labels Jun 17, 2026
@netlify

netlify Bot commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Pull request preview available for checking

Built without sensitive environment variables

Name Link
🔨 Latest commit 818c4a1
🔍 Latest deploy log https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/6a33585e829f1800087cf219
😎 Deploy Preview https://deploy-preview-56147--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@k8s-ci-robot k8s-ci-robot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. and removed cncf-cla: no Indicates the PR's author has not signed the CNCF CLA. labels Jun 17, 2026
@NONAN23x

NONAN23x commented Jun 17, 2026

Copy link
Copy Markdown
Contributor Author

Before (current site):

  • search input has low contrast over the active announcement banner
image

After After (this PR):

  • search input uses a visible background, border, and placeholder color over the same banner
image

lmktfy
lmktfy reviewed Jun 17, 2026
View reviewed changes

@lmktfy lmktfy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whether we have support for it or not, people want announcements with light backgrounds. This change makes the site more usable when that has happened.

/lgtm

Comment thread assets/scss/_k8s_search.scss
@@ -10,6 +10,20 @@
border-color: rgba(255, 255, 255, 0.2);
}

@lmktfy lmktfy Jun 17, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest something like this:

Suggested change
/* this is a work-around until we formally add support for announcements with
light backgrounds */

@k8s-ci-robot k8s-ci-robot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Jun 17, 2026
@k8s-ci-robot

k8s-ci-robot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

LGTM label has been added.

DetailsGit tree hash: 75fa5c3ad4de495104ee887f51e7480f2d4da581

@k8s-ci-robot k8s-ci-robot removed the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Jun 18, 2026
@k8s-ci-robot
k8s-ci-robot requested a review from lmktfy June 18, 2026 02:30
@k8s-ci-robot

k8s-ci-robot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

New changes are detected. LGTM label has been removed.

@k8s-ci-robot

k8s-ci-robot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

[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 ask for approval from lmktfy. 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:

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

@NONAN23x

NONAN23x commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@lmktfy Applied in 818c4a1 and pushed. Thanks for the suggestion; when you get a chance, could you please re check and add lgtm if this looks good...?

@NONAN23x

NONAN23x commented Jun 23, 2026

Copy link
Copy Markdown
Contributor Author

@lmktfy Friendly ping when you have a moment to re-check this one. I have applied the suggested change...

@natalisucks

natalisucks commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

thanks @NONAN23x!
/lgtm

@kubernetes-prow kubernetes-prow Bot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Jun 30, 2026
@kubernetes-prow

kubernetes-prow Bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

LGTM label has been added.

DetailsGit tree hash: e7fd890c5cd596c59b5e81935e001c1e42672d9d

@NONAN23x

NONAN23x commented Jun 30, 2026

Copy link
Copy Markdown
Contributor Author

@natalisucks Thanks for reviewing and adding lgtm!
Would you also be able to approve this PR?... 👀

@reylejano

reylejano commented Jun 30, 2026

Copy link
Copy Markdown
Member

/approve

@kubernetes-prow

kubernetes-prow Bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: reylejano

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

The pull request process is described here

Details Needs approval from an approver in each of these files:

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

@kubernetes-prow kubernetes-prow Bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jun 30, 2026
@kubernetes-prow
kubernetes-prow Bot merged commit 117b2f7 into kubernetes:main Jun 30, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@natalisucks natalisucks Awaiting requested review from natalisucks
@tengqm tengqm Awaiting requested review from tengqm
@lmktfy lmktfy Awaiting requested review from lmktfy

Assignees

@natalisucks natalisucks

@lmktfy lmktfy

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. lgtm "Looks good to me", indicates that a PR is ready to be merged. sig/docs Categorizes an issue or PR as relevant to SIG Docs. size/S Denotes a PR that changes 10-29 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Search bar is not visible

5 participants

@NONAN23x @k8s-ci-robot @natalisucks @reylejano @lmktfy