diff --git a/stirling-pdf/src/main/resources/static/css/navbar.css b/stirling-pdf/src/main/resources/static/css/navbar.css index 384d54186..018727776 100644 --- a/stirling-pdf/src/main/resources/static/css/navbar.css +++ b/stirling-pdf/src/main/resources/static/css/navbar.css @@ -384,19 +384,7 @@ html[dir="rtl"] .dropdown-menu { right: auto; } -html[dir="ltr"] .dropdown-menu[data-bs-popper] { - top: auto; - left: auto; - right: 0; - margin-top: 0 !important; -} - -html[dir="rtl"] .dropdown-menu[data-bs-popper] { - top: auto; - left: 0; - right: auto; - margin-top: 0 !important; -} +/* Bootstrap Popper positioning overrides removed - dropdowns now position naturally relative to their buttons */ .dropdown-menu-wrapper { padding: 1.5rem 0; diff --git a/stirling-pdf/src/main/resources/templates/fragments/common.html b/stirling-pdf/src/main/resources/templates/fragments/common.html index 0f9db7b76..1bda883d2 100644 --- a/stirling-pdf/src/main/resources/templates/fragments/common.html +++ b/stirling-pdf/src/main/resources/templates/fragments/common.html @@ -85,7 +85,16 @@ const dropdowns = document.querySelectorAll('.dropdown-menu'); dropdowns.forEach(dropdown => { dropdown.style.transform = `scale(${dropdownScale})`; - dropdown.style.transformOrigin = 'top center'; + + // Use different transform origins based on dropdown position + const parentItem = dropdown.closest('.nav-item'); + const navbar = dropdown.closest('.navbar-nav'); + + // Check if this is a right-aligned dropdown (language, favorites, search, etc.) + const isRightAligned = navbar && navbar.classList.contains('flex-nowrap') && + !parentItem?.closest('.dropdown-mega'); + + dropdown.style.transformOrigin = isRightAligned ? 'top right' : 'top left'; }); console.log('Applied dropdown scale:', dropdownScale);