mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2026-04-07 05:12:19 +00:00
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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user