fix(navbar): center logo on mobile (fix hamburger offset)

[ritorhymes]

Description

The navbar's logo on medium and small viewports was intended to be centered but was visually offset to the left because the hamburger icon's position in the DOM displaced it off-center.

This PR fixes the issue by applying absolute positioning and transform to keep the logo symmetrically centered horizontally within the navbar across responsive breakpoints.

This improves UX on mobile devices by enhancing visual balance as the user scrolls the page with the fixed navbar.

Screenshots

Before

After

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: ritorhymes / name: Rito (6c1987b)

[k8s-ci-robot]

Welcome @ritorhymes!

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 dipesh-rawat for approval. For more information see the Code Review Process.

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

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	6c1987b
🔍 Latest deploy log	https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/68d39327f454950008b37498
😎 Deploy Preview	https://deploy-preview-52382--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.

[lmktfy]

Cool. I don't know if you'd be interested in tackling #22021 as well, some time?

[lmktfy]

At some viewport sizes, this doesn't look right. Here's an example:

Would you be interested in helping us to align to Docsy? If we do that, the logo is likely to end up centered, although by a different mechanism.

[ritorhymes]

Ooops. Glad you caught that regression. I initially wrote the fix with CSS and explicit numeric breakpoint values. I swapped it to the SCSS bootstrap syntax to match the rest of the code before I committed and used md when actually sm (and lower) is the correct breakpoint range. It's not meant for md or higher.

It's fixed now and behaves appropriately.

[ritorhymes]

When I have some time I can also take a look at the other initiative(s) you mentioned too.

Meanwhile, hoping this fix is a good addition as is.