michael_dileo/Keyboard-Vagabond-Web
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix nav bar being stacked in mobile. fixed header and subtitle positioning in mobile views

Browse Source
This commit is contained in:
Michael DiLeo
2025-10-27 10:56:24 +00:00
parent 9e15866468
commit a7e7697fec
1 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/site-styles/style.css
View File

@@ -82,8 +82,9 @@
.banner-title { .banner-title {
font-size: 1.8rem; font-size: 1.8rem;
top: calc(var(--pico-typography-spacing-vertical) * 0.5); top: calc(var(--pico-typography-spacing-vertical) * 0.5);
left: var(--pico-spacing); /* left: 50%; */
right: var(--pico-spacing); right: auto;
/* transform: translateX(-50%); */
} }
} }
@@ -258,18 +259,44 @@
} }
/* Mobile breakpoint - hide desktop nav and show mobile nav */ /* Mobile breakpoint - hide desktop nav and show mobile nav */
@media (max-width: 768px) { @media (max-width: 767px) {
.desktop-nav { .desktop-nav {
display: none; display: none;
} }
.mobile-nav { .mobile-nav {
display: flex; display: flex;
flex: 0 0 auto;
}
/* Arrange mobile nav items horizontally */
header nav {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center;
gap: 0;
}
/* Make the About/theme toggle ul display as flex */
header nav > ul:not(.desktop-nav):not(.mobile-nav) {
display: flex !important;
gap: calc(var(--pico-spacing) * 0.5);
align-items: center;
flex: 0 0 auto;
margin: 0;
}
header nav > ul:not(.desktop-nav):not(.mobile-nav) {
padding: 0;
}
header nav > ul:not(.desktop-nav):not(.mobile-nav) li {
margin: 0;
} }
/* Style the dropdown for mobile */
.mobile-nav .dropdown { .mobile-nav .dropdown {
width: 100%; width: auto;
min-width: 120px;
} }
.mobile-nav .dropdown summary { .mobile-nav .dropdown summary {