Change link-color on fixed nav based on current row-background

aronsundberg

Is there a way to change the color of links in a fixed nav menu based on the current background-color of the row. I know there's plugins like backgroundCheck but it only works on images.

On my website there's a different bg-color for each section and when its a dark color the links wont show, obviously. Here's the website: www.aronsundberg.se

Grateful for any help or advice!

arminunruh

oh wow, nice website!

Ok you got one black row and I guess you want to have white nav text just for that.
Right click any rows where you want your menu to be white, choose "set html class/id" and set the class: blackrow

Enter this js into "Custom <head> content" in "Custom CSS & HTML" in "Lay Options":

<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".blackrow");
        $nav = jQuery("nav");
        $nav.removeClass("white");
    });
    
    jQuery(document).on("scroll", function(){
        $blackRows.each(function(){
            var rect = this.getBoundingClientRect();
            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.addClass("white");
                return false;
            }else{
                $nav.removeClass("white");
            }
        });
    });
</script>

And this css into "Custom CSS for Desktop Version"

nav.primary a{
    transition: all 200ms ease;
}

nav.primary.white a{
    color: white;
    opacity: 1;
}

aronsundberg

@arminunruh Wow thanks a lot for writing all that code, i'll try this immediately. Thanks so much for your help :100: :)

zochovsky

@arminunruh

Hey Armin,

Thanks for the tip.

That worked great, but is there any chance to make it work when the full screen slider is enabled on a page?

Cheers

stdhd

Amazing! Would this be possibe with „Fullscreen Slider“ too?