Menu change on scroll

[jameswarrack]

Hi,

I’d like to recreate a menu that functions in the same way as the one on this site: https://www.hellostudent.co.uk/

Could you help me achieve this?

Cheers

James

[thai]

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[jameswarrack]

It’s thesem.co but we haven’t done anything to implement this yet as we can’t see how.

[Prasant]

Hello @jameswarrack,

Thanks for sharing the URL.

Because this requires custom development and regretfully that would fall beyond the scope of support we can offer. However you can use following code to get started under X > Launch > Options > JS:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 200) {
      navbar.addClass('menu-back-color');
    } else {
      navbar.removeClass('menu-back-color');
    }
  });
});

After that add following CSS under X > launch > Options > CSS:

.x-navbar {transition: 0.2s all linear;}

.x-navbar.menu-back-color {background-color: blue;}

Please adjust 200 from the code to change the position.

If you are not comfortable with programming, I suggest you to seek professional help.

Thanks.