fix(nav): prevent navbar items from wrapping to second line

- Set flex-wrap: nowrap on navbar-nav to keep all items in one row
- Add hidden overflow-x scroll (no visible scrollbar) as fallback
- Fix #navbar_logo taking up space when invisible via max-width transition

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-30 10:10:55 +02:00
parent 66b1f0d029
commit 6861b2c0eb

View File

@@ -111,6 +111,19 @@ div#navbarNavfooter li.nav-item {
margin-right: 6px; margin-right: 6px;
} }
/* Prevent nav items from wrapping to a second line */
div#navbarNavheader .navbar-nav,
div#navbarNavfooter .navbar-nav {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
}
div#navbarNavheader .navbar-nav::-webkit-scrollbar,
div#navbarNavfooter .navbar-nav::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
main, footer, header, nav { main, footer, header, nav {
position: relative; position: relative;
box-shadow: box-shadow:
@@ -168,13 +181,16 @@ iframe{
} }
#navbar_logo { #navbar_logo {
/* start invisible but in the layout (d-none will actually hide it) */
opacity: 0; opacity: 0;
transition: opacity var(--anim-duration) ease-in-out; max-width: 0;
overflow: hidden;
transition: opacity var(--anim-duration) ease-in-out,
max-width var(--anim-duration) ease-in-out;
} }
#navbar_logo.visible { #navbar_logo.visible {
opacity: 1 !important; opacity: 1 !important;
max-width: 300px;
} }