mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2026-05-14 09:15:32 +00:00
Kevin Veen-Birkenbach
f3c15e3e1c
- Move <header> overflow:hidden into body.fullscreen scope and drop the implicit-vertical-clip overflow-x:auto from .navbar-nav so dropdown menus can escape the navbar. - Drive top-level dropdowns through bootstrap.Dropdown (popperConfig strategy:'fixed'), and add a chooseDirection() helper that toggles .dropup/.dropdown on the .nav-item based on space above vs below before each show. Split the navigation.css rules to position the menu with top:100% or bottom:100% accordingly. - Mark the dropdown toggle with data-bs-toggle="dropdown" in the template; cover that with a Jinja-rendered unit test and add Cypress specs for the header (opens downward) and footer (flips to .dropup) cases. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
35 lines
647 B
CSS
35 lines
647 B
CSS
/* Top-level dropdown menu — direction toggled by JS via .dropdown / .dropup */
|
|
.nav-item.dropdown > .dropdown-menu,
|
|
.nav-item.dropup > .dropdown-menu {
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 1050;
|
|
}
|
|
|
|
.nav-item.dropdown > .dropdown-menu {
|
|
top: 100%;
|
|
bottom: auto;
|
|
}
|
|
|
|
.nav-item.dropup > .dropdown-menu {
|
|
top: auto;
|
|
bottom: 100%;
|
|
}
|
|
|
|
/* Submenu position */
|
|
.dropdown-submenu > .dropdown-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%; /* Opens to the right */
|
|
z-index: 1050;
|
|
}
|
|
|
|
/* Ensure a smooth transition */
|
|
.dropdown-menu {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
nav.navbar {
|
|
border-radius: 0;
|
|
}
|