[DESIGN]: Header nav links and GitHub button wrap on medium screen sizes

[successbyte]

Describe the Issue

On medium screen widths (approximately 1020px–1150px), the header navigation links and the GitHub button text wrap onto multiple lines. This causes the header layout to look broken and visually inconsistent.

Expected Outcome

The header navigation links and the GitHub button text should remain on a single line and not wrap when the screen width is between 1020px and 1150px.

Screenshots

Steps to Reproduce

• Go to https://www.asyncapi.com/en
• Resize the browser window to a width between 1020px and 1150px
• Observe that:
  • Header navigation links wrap onto two lines
  • The GitHub button text wraps onto three lines

Browser/Device

OS: Ubuntu
Browsers: Chrome, Firefox

Additional Notes

none

Check Before Submitting

• I have looked for similar issues to avoid duplicates.
• I have reviewed the Contributing Guidelines.

Would you like to help fix this issue? (Not required, but appreciated!)

• Yes, I am interested in contributing to the fix.
• No, I am just reporting the issue.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[successbyte]

I will submit a PR later today.

[KariraLakshya]

@princerajpoot20 while i was checking this issue I found out when the screen width reaches 1023px the "Star on github" button disappears:

So should i Fix it??

[successbyte]

@princerajpoot20 Before starting the implementation, I’d like to confirm the expected behavior with the maintainers.
would you prefer one of the following approaches (or something else):

• Slightly reducing the navbar font size at this breakpoint
• Reducing the AsyncAPI logo size
• Adjusting spacing and preventing wrapping (keeping current sizes)
• Hiding or collapsing some header elements (e.g., GitHub button text)

I’m happy to follow the design direction you prefer before opening the PR.

[pggdev]

are you working on this issue??

[successbyte]

Maintainers! Please clarify the expected here to open the PR

[princerajpoot20]

The website has undergone a redesign. If you still encounter this issue, please feel free to reopen it and provide evidence from the new design. Thanks for your effort

[successbyte]

@princerajpoot20 thanks for the review, I can still reproduce this issue on the website with new design, can you reopen this and assign me to open the PR, thanks

[princerajpoot20]

@successbyte you can proceed. First share the design, will review that, and once approved, then you can proceed with the implementation.

[hasithasandunlakshan]

Hey @princerajpoot20,

I noticed another similar issue here:Check the nav drodown.It is overflowing the device.

If possible, @successbyte can fix this in the same PR. Otherwise, I can create a separate issue and PR for it.

What do you think?