You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by "parkhojeong (via GitHub)" <gi...@apache.org> on 2026/05/05 04:49:29 UTC
[PR] Fix navbar toggle-button alignment on mobile and tablet [airflow-site]
parkhojeong opened a new pull request, #1522:
URL: https://github.com/apache/airflow-site/pull/1522
User reported that the hamburger menu on the Airflow landing page appears centered on small screens.
user-reported screenshot
<img width="1897" height="241" alt="image" src="https://github.com/user-attachments/assets/e78ea410-ba07-44b5-a0c7-f45cc8574701" />
Related: https://github.com/apache/airflow/discussions/66254
## Root cause
The navbar DOM is:
```html
<nav class="navbar">
<div class="navbar__icon-container">logo</div>
<div class="navbar__menu-container">desktop menu</div>
<div class="navbar__theme-toggle">theme toggle</div> <!-- order: 10 -->
<div class="navbar__drawer-container">hamburger</div>
</nav>
On mobile and tablet widths, the desktop menu is hidden, leaving the logo, theme toggle, and hamburger button in a single flex row.
Because `.navbar__theme-toggle` used `order: 10` and the logo area did not have an auto margin, the remaining controls stayed in the middle of the navbar row instead of being pushed to the far right, causing the hamburger button to appear centered.
## Fix
The navbar DOM is:
```html
<nav class="navbar">
<div class="navbar__icon-container">logo</div>
<div class="navbar__menu-container">desktop menu</div> <!-- hidden on mobile and tablet -->
<div class="navbar__theme-toggle">theme toggle</div> <!-- margin-left: auto -->
<div class="navbar__drawer-container">hamburger</div>
</nav>
The fix removes order: 10 from .navbar__theme-toggle and adds margin-left: auto, which keeps the controls aligned on the right side.
- mobile screenshot
| Before | After |
|---|---|
| <img width="452" height="102" alt="image" src="https://github.com/user-attachments/assets/9a1c0625-bdba-4ef0-9236-fab56d3ed8a6" /> | <img width="412" height="101" alt="image" src="https://github.com/user-attachments/assets/0cafaec0-93c9-4e0d-9ca0-87b8cd52e98b" /> |
- table screenshot(same as mobile)
| Before | After |
|---|---|
| <img width="998" height="96" alt="image" src="https://github.com/user-attachments/assets/2602d822-0c52-430f-913d-3e99c3b4202b" /> |<img width="887" height="100" alt="image" src="https://github.com/user-attachments/assets/90d23ea8-e137-46b8-8098-73f35d8c6300" /> |
<details>
<summary>desktop screenshot(not changed)</summary>
desktop screenshot(not changed)
| Before | After |
|---|---|
| <img width="1495" height="133" alt="image" src="https://github.com/user-attachments/assets/139fb550-2772-4f28-a8c8-470680cd78dc" /> | <img width="1493" height="126" alt="image" src="https://github.com/user-attachments/assets/a5a8db4e-da51-4b22-9e6f-d86522ecd422" /> |
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Fix navbar hamburger-icon alignment on mobile and tablet [airflow-site]
Posted by "parkhojeong (via GitHub)" <gi...@apache.org>.
parkhojeong commented on PR #1522:
URL: https://github.com/apache/airflow-site/pull/1522#issuecomment-4376850289
> <img alt="image" width="2000" height="1293" src="https://private-user-images.githubusercontent.com/54111883/587480861-b2d513d8-0312-4b38-beb5-aff3eaf55492.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzc5NjA2ODIsIm5iZiI6MTc3Nzk2MDM4MiwicGF0aCI6Ii81NDExMTg4My81ODc0ODA4NjEtYjJkNTEzZDgtMDMxMi00YjM4LWJlYjUtYWZmM2VhZjU1NDkyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA1MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNTA1VDA1NTMwMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU5M2I3Y2ZkMWY0ZTkyYjM2YWI1NjkzNjM2MzA2NTJhZjFhMDE3ZmI1NzczNzQxM2RjMDQyZTllYTk4Y2Q5NGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnJlc3BvbnNlLWNvbnRlbnQtdHlwZT1pbWFnZSUyRnBuZyJ9.DgYj4uMFvxUVibbuRfSWV7KyZ7lXY1HcZv4ll4IFcLU"> It seems the document page issue might still be unresolved. Would you mind taking a look?
Sure, I'll take a look
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Fix navbar hamburger-icon alignment on mobile and tablet [airflow-site]
Posted by "choo121600 (via GitHub)" <gi...@apache.org>.
choo121600 merged PR #1522:
URL: https://github.com/apache/airflow-site/pull/1522
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Fix navbar hamburger-icon alignment on mobile and tablet [airflow-site]
Posted by "parkhojeong (via GitHub)" <gi...@apache.org>.
parkhojeong commented on PR #1522:
URL: https://github.com/apache/airflow-site/pull/1522#issuecomment-4390038997
updating docs is done
https://github.com/apache/airflow/pull/66430#issuecomment-4390033371
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Fix navbar hamburger-icon alignment on mobile and tablet [airflow-site]
Posted by "parkhojeong (via GitHub)" <gi...@apache.org>.
parkhojeong commented on PR #1522:
URL: https://github.com/apache/airflow-site/pull/1522#issuecomment-4385522901
For reference, PR https://github.com/apache/airflow-site/pull/1523 and https://github.com/apache/airflow/pull/66430 ã…—have already been merged.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Fix navbar hamburger-icon alignment on mobile and tablet [airflow-site]
Posted by "choo121600 (via GitHub)" <gi...@apache.org>.
choo121600 commented on PR #1522:
URL: https://github.com/apache/airflow-site/pull/1522#issuecomment-4376731228
<img width="2168" height="1402" alt="image" src="https://github.com/user-attachments/assets/b2d513d8-0312-4b38-beb5-aff3eaf55492" />
It seems the document page issue might still be unresolved. Would you mind taking a look?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Fix navbar hamburger-icon alignment on mobile and tablet [airflow-site]
Posted by "parkhojeong (via GitHub)" <gi...@apache.org>.
parkhojeong commented on PR #1522:
URL: https://github.com/apache/airflow-site/pull/1522#issuecomment-4377602745
> <img alt="image" width="2000" height="1293" src="https://private-user-images.githubusercontent.com/54111883/587480861-b2d513d8-0312-4b38-beb5-aff3eaf55492.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzc5NjA2ODIsIm5iZiI6MTc3Nzk2MDM4MiwicGF0aCI6Ii81NDExMTg4My81ODc0ODA4NjEtYjJkNTEzZDgtMDMxMi00YjM4LWJlYjUtYWZmM2VhZjU1NDkyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA1MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNTA1VDA1NTMwMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU5M2I3Y2ZkMWY0ZTkyYjM2YWI1NjkzNjM2MzA2NTJhZjFhMDE3ZmI1NzczNzQxM2RjMDQyZTllYTk4Y2Q5NGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnJlc3BvbnNlLWNvbnRlbnQtdHlwZT1pbWFnZSUyRnBuZyJ9.DgYj4uMFvxUVibbuRfSWV7KyZ7lXY1HcZv4ll4IFcLU"> It seems the document page issue might still be unresolved. Would you mind taking a look?
@choo121600
Thanks for catching this! the docs pages weren't picking up the fix.
Opened #1523 to bump the theme to 0.3.10 so the navbar fix gets repackaged and shipped to the docs.
Mind taking a look?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org