Logo overlaps with other nav bar elements when search bar is present (on Firefox)

[holistic-developer]

This is a Bug Report

Problem: On Firefox the kubernetes logo overlaps with other navbar items on .../docs pages when the search bar is present.

Proposed Solution: Decrease the size of the search bar.

Page to Update: All pages using the layouts/partials/navbar.html which is mostly https://kubernetes.io/docs/

Additional Information I used Firefox version 130 on Mac with a resolution of 1512 x 982

[holistic-developer]

This might be related to https://github.com/kubernetes/website/issues/45077

[dipesh-rawat]

/area web-development

[thisisharrsh]

/assign

[thisisharrsh]

Facing the same issue at 1512 * 982 resolution.

[sftim]

My suggestion: drop the Case Studies section.

[thisisharrsh]

drop the Case Studies section.

I am planning to adjust the CSS properties for the page at the given size. But I will consider your suggestion also.

[holistic-developer]

My suggestion: drop the Case Studies section.

I would advise against that.

Here is how it is rendered in chrome at the same resolution:

and again on Firefox So, the actual issue is the size of the search bar.

[thisisharrsh]

Thanks @holistic-developer, for the issue rectification.

[sftim]

@holistic-developer several changes could help:

• Managing the size of the search bar
• Dropping the case studies section, which is no longer current
• Improving how the top nav adapts to the available space (for example, on narrow viewports, we could have an icon rather than a bar for search; clicking the icon could take you to /search)

[katcosgrove]

/triage accepted /priority important-soon

[sftim]

When I shrink the viewport to a similar width, the search form within the nav bar disappears completely. But maybe this is too dependent on details such as DPI, root element em size, etc.

[thisisharrsh]

The issue is fixed here.

[thisisharrsh]

• Managing the size of the search bar

Raised the PR on this approach.