parkhojeong commented on code in PR #1524:
URL: https://github.com/apache/airflow-site/pull/1524#discussion_r3238815783
##########
landing-pages/site/assets/scss/_navbar.scss:
##########
@@ -19,13 +19,17 @@
@import "colors";
@import "media";
-.navbar {
- position: fixed;
+header {
+ position: sticky;
top: 0;
+ z-index: 32;
+}
+
+.navbar {
+ position: static;
width: 100%;
background-color: white;
border-bottom: solid 1px map-get($colors, very-light-pink);
- z-index: 32;
Review Comment:
`position: sticky` would be preferable because it keeps the navbar in the
normal document
flow, so the following content naturally starts below it while the navbar
can still stick
to the top during scroll.
However, with the current DOM structure (`<header><div
class="navbar">...</div></header>`),
sticky would need to be applied to the `header` wrapper. Applying it to
`.navbar` does not
work as expected because the sticky element is constrained by its
containing block, and
`header` only wraps the navbar. Applying sticky to the bare `header`
selector is also too
broad, and adding a new wrapper class just for this feels larger than
necessary for this fix.
So I kept the existing fixed navbar behavior and applied the navbar-height
offset globally
on `body`, so all pages get consistent spacing.
https://github.com/apache/airflow-site/pull/1524/commits/a397e40ba56332eef26cedee776afa7ea89bb13d
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position#sticky
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
