Change nav and logo text to white/black when scrolling

arminunruh · wrote on Dec 13, 2017, 8:08 AM

Hey! This should work now:

JS (insertable in "custom <head> content" in "lay options" -> "custom css & html")

<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".darkrow");
        $nav = jQuery("nav a, .sitetitle span");
        $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>

CSS (insertable in "custom css for desktop" in "lay options" -> "custom css & html")

.white{
color: white!important;
}

The main difference is just

        $nav = jQuery("nav a, .sitetitle span");

nav a instead of nav and sitetitle span instead of span. :)

adam · wrote on Jan 3, 2018, 9:20 AM

Hey Armin thanks for the update.

Is there anyway this is possible with direction set to horizontal and activating fade in effect rather then sliding effect?

Many thanks

mariusjopen · wrote on Jan 3, 2018, 10:14 PM

Hi @adam

these are the only options so far:

All the best!

Marius

adam · wrote on Jan 3, 2018, 11:21 PM

Hi Marius, thanks for replying

I am aware of the options available within the fullscreen slider, I am asking if its possible to still apply the solution Armin has suggested to changing the site title and navigation color when "horizontal" direction and "fading effect" is selected.

I got this to work when scrolling vertically however it doesn't work when scrolling horizontally or with the fade effect activated.

Does that make sense?

mariusjopen · wrote on Jan 4, 2018, 2:03 PM

Hi @adam
ok. I get what you mean :-)

So what needs to be done it to change this function:

 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");
            }
        });

Right now it gets activated on scroll. You need to activate it when you click and change the slide.

You know the basics of jQuery?

All the best!

Marius

adam · wrote on Jan 4, 2018, 10:09 PM

Hi @mariusjopen

Thanks for the tip, im not to familiar with JQuery. Is it a difficult change?

Brant · wrote on Jan 14, 2019, 2:27 PM

This does only seem to work in combination with the Fullscreen Slider activated. Is there a way to make it work without / or best with the cover feature activated? help is much appreciated, thanks a lot guys!

mariusjopen · wrote on Jan 15, 2019, 7:47 PM

Dear @adam
I recommend to make a simple tutorial on Codeacademy.

You of course need to make a CSS line called

.white {
baclground: green;
}

Then you can see the effect.

Dear @Brant
no. this is always when a row which you gave a custom class hits the top of a page.

Best!

Marius

StudioTomas · Jul 21, 2021, 9:04 AM

Hi there,

I'm not sure if this is the right forum post to comment on but hopefully you can help me!

My work in progress website is: studiotomas.com

I've used Armin's jQuery fix to turn my navigation white for certain rows in fullscreen slider using the .darkrow CSS, but I've encountered a couple of problems:

I've used an SVG for my logo in place of the site title, so I'm looking for this to link to a white version of the logo, or another fix which will turn the SVG white for a dark row.
The nav is turning white like it's supposed to on a dark row, but not matter what I try with custom css, I can't get the underline styling I have in place to change to white as well.

Help would be amazing, thanks!

Tomás

mariusjopen · wrote on Feb 15, 2019, 7:24 PM

Dear @adam
put the white into the body, then you can control all elements on the page.
For example also a white logo which is visible or not.

Depending on the body class. Have a look as well into the structure of the navigation. It has a span element inside.

This element has the border-colour.

Hope that gave you a direction :-)

Best!

Marius

mp · wrote on Aug 13, 2019, 8:00 AM

this works nicely!

... but if I use it on the first row, the site title will only change after i started scrolling a little bit. Is there a way to have it changed already on reload?

thanks

mariusjopen · wrote on Aug 14, 2019, 5:20 PM

Dear @mp
you could set the initial colour with CSS.
No need for jQuery in this case.

Best!
Marius

koenarbouw · wrote on Aug 28, 2020, 1:17 PM

Hey hey,

Just posting in here as this solved some of what I am trying to achieve. Here is a rough WIP https://mickeyross.photo/ I am working on, I would love to change the menu colour on every full screen scroll so it matches the text below. I have it working on the orange text one, what would be the best way to replicate this all the way down the page? Stuck on the purple one.

Appreciate the help.

Thanks
Koen

Richard · wrote on Sep 2, 2020, 5:13 PM

Dear @koenarbouw

Could you please post the code you are currently using? & lets take a look :)
I just ask to clarify as it may differ from previously in this thread,( some posts are two years old )

Website looks great btw!

Best Wishes
Richard

fabiandraxl · Jul 21, 2021, 5:18 AM

@StudioTomas Hej, just visited you site and I am wondering how you achieved the changing color effect on the logo of your site? Could you please reach out to me?

Richard · wrote on Jul 22, 2021, 2:31 AM

Dear @fabiandraxl

There are two different logo's. Every two 'scrolls' or 'slides' the class "white" is added to the site title changing the "background" url.

(standard = black logo)

a.sitetitle {
    display: block;
    width: 50px;
    height: 34px;
    background: url(/wp-content/uploads/2019/01/ST_Logo_test-03-03.svg) no-repeat center center / contain;
}

(white 'class added' = white logo)

.sitetitle.white {
    background: url(/wp-content/uploads/2019/02/ST_Logo_test-03-03_WHITE.svg) no-repeat center center / contain;
}

Also this link will help with use of the Developer tools where you can inspect a page:

https://laytheme.com/documentation.html#custom-css-styling

Lay Theme Forum

Change nav and logo text to white/black when scrolling

Dear @fabiandraxl

Hope this helps & best wishes 🌝

Richard

Before you post:

When you post:

Online Users