fix mobile menu toggle button color when nav is sticky (#5346)

* fix: mobile menu toggle button color when nav is sticky

* fix: remove unnecessary style rule
This commit is contained in:
Kelvin Oghenerhoro Omereshone 2022-04-25 14:49:58 +01:00 committed by GitHub
parent 77f3513020
commit 359fe8a07c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 1 deletions

View file

@ -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;

View file

@ -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')
}