Boxus template - Dynamic nav color when scrolling

Website Templates
1

Hello,

First of all, amazing template !

In Boxus template, the nav menu background-color is changing when the user is scrolling. The nav color is linked to the section-title-holder (the squares).
Or, I would like to have the same behavior but with the title inside the square or the number. For exemple, if the square is blue but the number is white, the nav should be white aswell.

I could find a way to do it but the problem is that the title and the number are moving quit randomly. I guess because of the .stick_in_parent rule. Is there any solution to make it works without breaking everything ? :frowning:

The Boxus default code for this feature :
jQuery(".section-title-holder").stick_in_parent({offset_top: 64}).on(“sticky_kit:stick”, function (e) {
jQuery(’.menu-wrapper, .menu-wrapper .sub-menu’).css(‘backgroundColor’, jQuery(this).css(“backgroundColor”));
jQuery(’.menu-wrapper a, .mob-menu’).css(‘color’, jQuery(this).find(’.section-num span’).css(“color”));
});

jQuery(".section-title-holder").stick_in_parent({offset_top: 64}).on("sticky_kit:unbottom", function (e) {
    jQuery('.menu-wrapper, .menu-wrapper .sub-menu').css('backgroundColor', jQuery(this).css("backgroundColor"));
    jQuery('.menu-wrapper a, .mob-menu').css('color', jQuery(this).find('.section-num span').css("color"));
});

My code :
jQuery(".section-title-holder h2").stick_in_parent({offset_top: 64}).on(“sticky_kit:stick”, function (e) {
jQuery(’.menu-wrapper, .menu-wrapper .sub-menu’).css(‘backgroundImage’, jQuery(this).css(“backgroundImage”));
jQuery(’.menu-wrapper a, .mob-menu’).css(‘color’, jQuery(this).find(’.section-num span’).css(“color”));
});

jQuery(".section-title-holder h2").stick_in_parent({offset_top: 64}).on("sticky_kit:unbottom", function (e) {
    jQuery('.menu-wrapper, .menu-wrapper .sub-menu').css('backgroundImage', jQuery(this).css("backgroundImage"));
    jQuery('.menu-wrapper a, .mob-menu').css('color', jQuery(this).find('.section-num span').css("color"));
});

Thanks in advance for your help !
Best regards

2

Hello,

I hope you are doing well today.

The colors are random, so you would have to make a new rule that uses a color sequence that each element can follow simultaneously, as the random colors would change for each independent use of it.

Best Regards,
Support

3

Hello,

Thanks for your answer!

I’m not sure to understand your explaination tho…

In my opinion, the colors are not random since each square (class .section-title-holder) has a individual color (blue, pink, orange, etc). In the default code, the menu’s color is the same color as the square in the current view.

In my case, I would like to make dynamic the menu’s color not with the square but with the title inside the square.
I don’t really get what you mean by “the colors are random”

Maybe there is something I didn’t get… :o

Best regards,
Walid