diff --git a/css/ebi-css-build/_embl_selector.scss b/css/ebi-css-build/_embl_selector.scss index a3f18323968a88c0301d622f3462e7bcf3ab54af..bc3eb43965dc49f4688f13beedaf7d9e683a588a 100644 --- a/css/ebi-css-build/_embl_selector.scss +++ b/css/ebi-css-build/_embl_selector.scss @@ -98,6 +98,17 @@ margin-left: 55px; } } + .embl-selector.active { + background-color: #ddd; + padding-right: 1rem; + .button, + .button.hover, + .button:focus, + .button:hover { + background-image: url(https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-black.svg); + } + } + // begin to hide bits of dropdown toggle as screen shrinks @media screen and (max-width: 53em) { .embl-selector .button { width: 0px; padding-right:0; overflow: hidden;} diff --git a/js/ebi-global-includes/script/4_ebiFrameworkContent.js b/js/ebi-global-includes/script/4_ebiFrameworkContent.js index ac85ea44471b55aead547f787fe73e0757945798..fbcad8e05c408c44719e3332a72d7d37f1cfbf96 100644 --- a/js/ebi-global-includes/script/4_ebiFrameworkContent.js +++ b/js/ebi-global-includes/script/4_ebiFrameworkContent.js @@ -192,13 +192,16 @@ function ebiFrameworkInsertEMBLdropdown() { // toggle the .embl-bar var emblBar = document.querySelectorAll(".embl-bar")[0]; + var emblBarButton = document.querySelectorAll(".embl-selector")[0]; var emblSelector = document.querySelectorAll(".embl-selector")[0].addEventListener("click", function( event ) { ebiToggleClass(emblBar,'active'); + ebiToggleClass(emblBarButton,'active'); window.scrollTo(0, 0); }, false); var emblSelectorClose = document.querySelectorAll(".embl-bar .close-button")[0].addEventListener("click", function( event ) { ebiToggleClass(emblBar,'active'); + ebiToggleClass(emblBarButton,'active'); window.scrollTo(0, 0); }, false);