Menu header resize width on trigger scroll up and down

How To
1

Hello,

I am wondering how to achieve this menu animation with bricks.

Here is the example ( made on framer) : https://studioseinabo.framer.website/

The menu header width shrinks on scroll.

Help will be very appreciated!
Thank you :slight_smile:

2

I managed to set an interaction on scroll but there is no option to choose scroll up or down …
So i can’t set and unset the attribute when scrolling up…

Is there a way to make a trigger listening to the scroll up and down?

Pleeeaase :slight_smile: Thank you !

3

To achieve the menu animation where the menu header width shrinks on scroll in Bricks Builder, you can use custom CSS and JavaScript. Add a scroll event listener to adjust the header’s width dynamically. Alternatively, use the built-in Bricks Builder scroll effects to create a similar effect. Here’s a basic example:

window.addEventListener('scroll', function() {
    let header = document.querySelector('.header-class');
    if (window.scrollY > 50) {
        header.style.width = '80%';
    } else {
        header.style.width = '100%';
    }
});

Replace .header-class with your actual header class name. Adjust the CSS values as needed.

1 Like
4

Sweet ! Thank you so much @davidmiller. It works!

Just one thing, on first load, the header is in between the 2 values.
It starts taking in account the value only after scrolling down style=“width: 22%;” then up style=“width: 100%;”

I made a quick screencast : https://imgur.com/mTcOAcE

I tried changing the scrollY value from 1 to 100, no effect.

I am putting the code in a snippet :

add_action('wp_footer', function() {
    echo "
    <script type='text/javascript'>
        document.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('scroll', function() {
                let header = document.querySelector('.header-nav');
                if (window.scrollY > 50) {
                    header.style.width = '22%';
                } else {
                    header.style.width = '100%';
                }
            });
        });
    </script>";
});
5

All good !
I added align self = stretch to the container.

It works now.

This method is great but the header size is tight to the scrollY.

Would be great if the width change could be triggered by scroll up or down instead

Again thank you so much for your help @davidmiller it is very appreciated!

6

Ok, i found this works to change the sizes on scroll up or down

function add_custom_js_to_footer() {
    echo "
    <script type='text/javascript'>
        document.addEventListener('DOMContentLoaded', function() {
            let lastScrollTop = 0;
            window.addEventListener('scroll', function() {
                let header = document.querySelector('.header-nav');
                if (header) {
                    let currentScroll = window.scrollY;
                    if (currentScroll > lastScrollTop) {
                        // Scrolling down
                        header.classList.add('scrolling-down');
                        header.classList.remove('scrolling-up');
                    } else {
                        // Scrolling up
                        header.classList.add('scrolling-up');
                        header.classList.remove('scrolling-down');
                    }
                    lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
                }
            });
        });
    </script>";
}
add_action('wp_footer', 'add_custom_js_to_footer');

With css including media queries

.header-nav {
  transition: width 0.5s ease;
  width: 100%
  !mportant;
}

/* For scrolling down */
.header-nav.scrolling-down {
  width: 20%!important;
}

/* For scrolling up */
.header-nav.scrolling-up {
  width: 100%;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .header-nav.scrolling-down {
    width: 50%!important;
  }

  .header-nav.scrolling-up {
    width: 100%!important;
  }
}

/* Media query for very small mobile devices */
@media (max-width: 480px) {
  .header-nav.scrolling-down {
    width: 70%!important;
  }

  .header-nav.scrolling-up {
    width: 100%!important;
  }
}
7

no problem if you face anything tell me