diff --git a/static/js/src/navigation.js b/static/js/src/navigation.js index bc56296c979..3009493a71d 100644 --- a/static/js/src/navigation.js +++ b/static/js/src/navigation.js @@ -58,6 +58,12 @@ mainList.addEventListener("click", function (e) { } else { handleDropdownClick(e.target.parentNode); } + } else if ( + target.classList.contains("p-navigation__dropdown") && + target.tagName == "A" + ) { + // This handles the globa-nav using a slightly different class naming convention + window.location.href = target.href; } }); @@ -105,8 +111,8 @@ function toggleSecondaryMobileNavDropdown(e) { } else { isDropdownOpen = true; } - mobileNavDropdown.classList.toggle("is-open", !isDropdownOpen); - mobileNavDropdownToggle.classList.toggle("is-open", !isDropdownOpen); + mobileNavDropdown?.classList.toggle("is-open", !isDropdownOpen); + mobileNavDropdownToggle?.classList.toggle("is-open", !isDropdownOpen); } function handleDropdownClick(clickedDropdown) { diff --git a/static/sass/_pattern_navigation.scss b/static/sass/_pattern_navigation.scss index 266341348ca..5ce19a6b51c 100644 --- a/static/sass/_pattern_navigation.scss +++ b/static/sass/_pattern_navigation.scss @@ -142,7 +142,12 @@ $meganav-height: 3rem; } .p-search-box__input { - background-color: #f2f2f2 !important; + background-color: $color-light !important; + + &:focus, + &:hover { + background-color: $color-light !important; + } } .p-search-box__input::placeholder { @@ -188,6 +193,10 @@ $meganav-height: 3rem; &[aria-hidden="false"] { overflow: unset; + + &::before { + pointer-events: none; + } } }