diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less index ce8ad80ef3..b71e2b8bb8 100644 --- a/website/assets/styles/layout.less +++ b/website/assets/styles/layout.less @@ -110,19 +110,26 @@ html, body { &.homepage-header { z-index: 9999; position: fixed; + color: #ffffff; top: 0; left: 0; right: 0; &.sticky { background-color: #fff; + color: #192147; + + .btn.btn-link { + color: #192147; + } + [purpose='header-nav'] { a { color: #192147; } + } } [purpose='header-btn'] { - color: #ffffff; cursor: unset; font-family: @navigation-font; font-weight: @bold; diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs index 8535983f43..7d71d60bda 100644 --- a/website/views/layouts/layout.ejs +++ b/website/views/layouts/layout.ejs @@ -297,10 +297,14 @@ function windowScrolled() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop var fleetLogo = header.querySelector('img') + var hamburgerMenuIcon = header.querySelector('.btn.btn-link > img') + console.log(hamburgerMenuIcon) if(scrollTop == 0 && header.classList.contains('homepage-header')) { header.classList.remove('sticky') fleetLogo.src = '/images/logo-white-118x48@2x.png' fleetLogo.style = 'width: 118px; height: 48px;' + hamburgerMenuIcon.src = '/images/icon-hamburger-16x14@2x.png' + return; } if (scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) { @@ -310,6 +314,7 @@ header.classList.add('sticky') fleetLogo.src = '/images/logo-blue-162x92@2x.png' fleetLogo.style = 'height: 92px; width: 162px;' + hamburgerMenuIcon.src="/images/icon-hamburger-blue-16x14@2x.png" } header.classList.remove('translate-y-0') }