godotengine/godot-website
1
0
Fork 0
mirror of https://github.com/godotengine/godot-website.git synced 2026-09-03 23:34:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: nav mobile page offset (#1357)

Browse Source
This commit is contained in:
Thibaud Goiffon
2026-06-15 13:54:53 +02:00
committed by GitHub
parent df95e79e05
commit 09fed9fbce
2 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
_includes/header.html
View File

@@ -7,7 +7,15 @@
<img class="nav-logo dark-logo" src="/assets/logo_dark.svg" width="136" height="48" alt="Godot Engine">
</a>
<div class="mobile-links">
<span class="fund mobile"><a href="https://fund.godotengine.org"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 13px; fill: white; margin-right: 4px;"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg> Donate</a></span>
<span class="fund mobile">
<a href="https://fund.godotengine.org">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 13px; fill: white; margin-right: 4px;">
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/>
</svg>
Donate
</a>
</span>
<label for="nav_toggle_cb" id="nav_toggle_btn">
<img src="/assets/icons/hamburger.svg" width="24" height="24" alt="Main menu">
</label>

28
assets/css/header.css
View File

@@ -1,28 +1,25 @@
header {
background: none;
/* Offset the height of the nav */
margin-bottom: -64px;
/* Show on top of GodotCon banner (if any). */
position: relative;
position: absolute;
top: 0.5em;
width: 100%;
z-index: 2;
height: 64px;
display: flex;
align-items: center;
/* Fixes some y offset */
font-size: 1rem;
.container {
background-color: var(--navbar-background-color);
overflow: initial;
width: 100%;
box-sizing: border-box;
padding: 5px;
padding-bottom: 4px;
padding-top: 1px;
padding: 0.2em 0.4em;
border-radius: 16px;
margin-top: 9px;
}
#logo-link {
@@ -56,6 +53,7 @@ header {
}
@media (max-width: 1200px) {
header {
top: 0;
.container {
border-radius: 0;
margin-top: 0;
@@ -74,7 +72,6 @@ header {
}
}
&.mobile {
top: -2px;
position: relative;
@media (min-width: 1200px) {
display: none;
@@ -113,8 +110,9 @@ header {
.mobile-links {
display: grid;
grid-template-columns: 1fr 49px;
grid-template-columns: auto auto;
align-items: center;
gap: 0.2em;
@media (min-width: 1200px) {
display: none;
}
@@ -263,14 +261,11 @@ header {
}
#nav_head {
width: 100%;
margin-top: 0.25rem;
}
#nav_toggle_btn {
display: block;
/* Make the navbar toggle button easier to click. */
padding: 1.25rem;
margin-top: -0.2rem;
margin-right: -1rem;
padding: 0.8em;
}
#nav_toggle_btn:hover {
background-color: hsla(0, 0%, 50%, 0.15);
@@ -299,7 +294,6 @@ header {
width: 100%;
}
#nav ul a {
width: 100%;
display: block;
/* Make links easier to click but still close to each other. */
padding-top: 0.75rem;