Browser: Chrome OS: IOS (mobile) URL: Link to a page that illustrates this issue: Blending Vocals
Video: Short screen recording that illustrates this issue: will add this later, but it’s pretty easy to recreate.
[Please describe this bug in as much detail as possible so we can replicate & debug this bug]
visit page in mobile
scroll down so the menu goes away because of the sticky header setting.
scroll up a little bit so the menu re appears
open the mobile menu
zoom out using two fingers
the menu now disappears and the user cannot scroll anymore
I have this on multiple websites. Any idea what to do? Will provide more details if needed!
It also happens when the user navigates to a new page and then goes back to the previous page. The menu disappears but the user is still unable to scroll. This is a serious bug which makes this function (sticky menu scroll) unusable.
Can support comment on this issue? It would be very much appreciated.
Edit: after some quick investigating, it seems that the .no-scroll class on the body does not get removed whenever the #brx-header recieves the class .slide-up. Nor is there a check to reset/remove the mobile menu overlay whenever the menu has the class .slide-up.
I’m certainly no pro, but this should be an easy fix? Or atleast give the option to disable the sticky slide up menu for mobile, as it is a really nice feature to have IMO.
I’m very sorry that I forgot to update the thread, but we investigated, found the cause and fixed it. So, if all goes right with testing, it will be included in the next update (most likely it will be)
We will update this topic once we release the fix.
@joy , Support was also very helpful with providing me a solution in the meantime. You could try it out and see if it works for you, in case your solution doesn’t fully solve it.
Also it appears to only be a problem for IOS on a physical phone. So be sure to test it there.
Not sure if the fix works with the newest version of bricks btw. This is tested with 10.3.1, but I also used it for an older version. Also be sure to exclude bricks.min.js from deferred/delayed JS if using a caching plugin.
Add this javascript, under bricks > settings > custom code
function bricksStickyHeader() {
let stickyHeaderEl = document.querySelector('#brx-header.sticky')
if (!stickyHeaderEl) {
return
}
let logo = document.querySelector('.bricks-site-logo')
let logoDefault
let logoInverse
let lastScrolled = -1 // -1 to make sure that the first time bricksStickyHeaderOnScroll() runs it doesn't slide up
let headerSlideUpAfter = stickyHeaderEl.hasAttribute('data-slide-up-after')
? stickyHeaderEl.getAttribute('data-slide-up-after')
: 0
if (logo) {
logoDefault = logo.getAttribute('data-bricks-logo')
logoInverse = logo.getAttribute('data-bricks-logo-inverse')
}
const bricksStickyHeaderOnScroll = () => {
// Check: Helper class found to keep header open (@since 1.10)
if (stickyHeaderEl.classList.contains('keep-open')) {
return
}
if ( document.body.classList.contains('no-scroll')) {
return
}
let scrolled = window.pageYOffset
if (scrolled > 0) {
stickyHeaderEl.classList.add('scrolling')
if (logo && logoInverse && logo.src !== logoInverse) {
logo.src = logoInverse
logo.srcset = ''
}
} else {
stickyHeaderEl.classList.remove('scrolling')
if (logo && logoDefault && logo.src !== logoDefault) {
logo.src = logoDefault
}
}
/**
* Slide up
*
* @since 1.9 - Add .sliding to prevent horizontal scrollbar (e.g. Offcanvas mini cart in header)
*/
if (headerSlideUpAfter && !document.querySelector('.bricks-search-overlay.show')) {
if (scrolled > lastScrolled && lastScrolled >= 0) {
// Scolling down
if (scrolled > headerSlideUpAfter) {
stickyHeaderEl.classList.add('slide-up')
stickyHeaderEl.classList.add('sliding')
}
} else {
// Scrolling up
stickyHeaderEl.classList.remove('slide-up')
setTimeout(() => {
stickyHeaderEl.classList.remove('sliding')
}, 400)
}
}
lastScrolled = scrolled
}
// Set sticky header logo inverse & slide up
window.addEventListener('scroll', bricksStickyHeaderOnScroll)
// Run it once on page load to set the .scrolling class if page is aready scrolled down
bricksStickyHeaderOnScroll()
}
Added it to Bricks > Seetings > Header/Footer
It did not work for me, my CSS has fixed things for now.
As you said let’s wait for the official fix in a future release and hopefully, we don’t have to deal with it again.