Logo, Navbar UI Improvement & Broken GitHub Fork Ribbon

[bhola-dev58]

Description

I noticed a few UI and responsiveness issues on the Public Lab Toolbox homepage:

1. 🧭 The navigation bar has an outdated design (responsiveness but not well arrangement or styling).
2. 🧱 The "Fork me on GitHub" ribbon image is broken and not displaying.
3. 🧩 The image is placed outside the <nav> element, which breaks layout on smaller screens.
4. 🎯 The Logo is not responsive due to which the the logo has not good frame

Steps to Reproduce

• Visit: https://code.publiclab.org/
• Observe the logo, navigation bar and the top-right ribbon.
• Use browser dev tools (Inspect Element) to see that the image is outside the nav tag and image source is invalid.

Screenshots

Suggested Improvements

• Replace the broken GitHub ribbon image with this valid one:

https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png

• Move the ribbon into the <nav> for proper layout alignment.
• Add responsiveness (media queries or Bootstrap) for mobile view.
• Improve styling of navbar links for better UX.
• Improve responsiveness of logo

Motivation

I’m currently preparing for GSoC 2026 and would love to contribute by modernizing the UI and making it mobile-friendly.

Please let me know if I can work on this issue 🙌

Thank you!

— Bhola Yadav

[ShivamGupta2003]

Hi @bhola-dev58,
I’d like to work on this issue. Could you please assign it to me?

[bhola-dev58]

@ShivamGupta2003
ok you can go on.