mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2026-05-14 09:15:32 +00:00
fix(navigation): unclip dropdowns and flip toward the side with more space
- 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>
This commit is contained in:
@@ -1,9 +1,19 @@
|
||||
/* Top-level dropdown menu */
|
||||
.nav-item .dropdown-menu {
|
||||
position: absolute; /* Important for positioning */
|
||||
top: 100%; /* Default opening direction: downwards */
|
||||
/* 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; /* Ensures the menu appears above other elements */
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.nav-item.dropdown > .dropdown-menu {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.nav-item.dropup > .dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
/* Submenu position */
|
||||
|
||||
Reference in New Issue
Block a user