UI : Hamburger Menu Position on Small Screens

[Rohith1510]

UI: Hamburger Menu Alignment

Hi everyone 👋

While exploring the Airflow UI, I noticed that on smaller screen sizes the hamburger menu icon appears centered in the header.

Observation

• On larger screens: full navigation is shown (no hamburger)
• On smaller screens: hamburger menu appears, but it is centered

Question

Is this centered alignment intentional from a design perspective?

In many mobile UI patterns, navigation menus are typically right-aligned, so I wanted to check if aligning it to the right would better match expected UX conventions.

Suggestion

If this isn’t intentional, I’d be happy to contribute a small fix to align the hamburger menu to the right while keeping the current responsive behavior intact.

Would love to hear your thoughts on this before opening a PR.

Thanks!

[parkhojeong]

Thanks for the report.

It seems to happen when you use Airflow versions below 3.0.0.
I set up an old version and tested with small screen. but the hamburger menu is in correct position on the right

Can you share more information/details about the version and environment?

[Rohith1510]

The issue is on the Airflow landing page.

[parkhojeong]

Ah, I see. Thanks for clarifying. I’ll take a look!

[Rohith1510]

sure!

[Rohith1510]

I’d be happy to contribute a fix.

[parkhojeong]

I opened a PR for this: apache/airflow-site#1522
It fixes the mobile/tablet navbar alignment so the hamburger icon stays on the right.

[parkhojeong]

@Rohith1510
This has been fixed now. Could you check it?

[Rohith1510]

yeah it's fixed

[parkhojeong]

yeah it's fixed

Thanks. Glad it helped!