Transparent headers can look great, but sometimes they create challenges. Obviously, having a “scrolling” state with a solid colour background is a must. And it works fine in Bricks…
But I think that for aesthetical reasons, the same behaviour and effect should be applied when a user opens a megamenu or a dropdown. Otherwise you have the header with the background image, then below the header the solid background of the megamenu and below it again the page hero. It looks very bad, out of place, if you ask me…
Switching the transparent header to the “scrolling” state with the regular logo, would be much more aesthetically pleasing.
To swap the header colors, Bricks adds the “scrolling” class, but there is also some background magic going on swapping the logos.
Does anyone know how to achieve the same effect when a user opens a megamenu or a dropdown? Without it, I think I shouldn’t use megamenus with transparent headers… It just looks weird with some background images.
Greetings,
Tom
P.S.
Here is an example of a site that has a transparent header and a megamenu:
When you open the megamenu, the header will no longer be transparent. I think this is the right way, and I would like to achieve the same in Bricks, but also with a logo swap.
But now, after getting to know Bricks a little better, I think that potentially it might be possible with Interactions > Trigger: hover/click > Set attribute > Target: CSS Selector.
Then style the data-attribute with custom CSS. If the logo is a SVG, you could also swap path colors, based on the data-attribute value of the parent container, I think.
I’d like to chime in with a solution, so it’s something like the interactions as @AMX mentioned, but for the attribute still there’s some logic missing.
This was my approach to solve this issue, it requires a little JS function, and then programming the interactions.
1) Javascript function
let ensureScrollingInterval = null;
function handleMouseHover(action) {
const header = document.querySelector('header');
// Always set or remove the attribute
if (action === 'enter') {
header.setAttribute('data-scrolling', 'true');
if (window.scrollY === 0) {
header.classList.add('scrolling');
}
startEnsuringScrolling(); // Start ensuring the class
} else if (action === 'leave') {
header.removeAttribute('data-scrolling');
if (window.scrollY === 0) {
header.classList.remove('scrolling');
}
stopEnsuringScrolling(); // Stop ensuring the class
}
}
function ensureScrollingClass() {
const header = document.querySelector('header');
if (window.scrollY === 0 && header.getAttribute('data-scrolling') === 'true') {
header.classList.add('scrolling');
}
}
// Start an interval to keep ensuring the class
function startEnsuringScrolling() {
if (!ensureScrollingInterval) {
ensureScrollingInterval = setInterval(() => {
ensureScrollingClass();
}, 10); // Check every 10ms
}
}
// Stop the interval
function stopEnsuringScrolling() {
if (ensureScrollingInterval) {
clearInterval(ensureScrollingInterval);
ensureScrollingInterval = null;
}
}
// Continuously check and restore the class
window.addEventListener('scroll', ensureScrollingClass);
This will produce the scrolling styles on mouse enter, and remove them on mouse leave, only if the page is at the top, keeping everything intact when header is already sticky!
I do still feel like this isn’t the cleanest solution possible, so if anyone would help me think this through to make this feel a little less “hackier”, It’d be welcomed!
