Different menu color for each slide on Fullscreen slider

[MAN]

Hey Armin,

Is it possible with some CSS to change the site title and menu color for individual slides on Fullscreen slider? I have some dark and some lighter ones and it would be great.

Thanks

[arminunruh]

Hey MAN!
Using the "fpOnLeave" event you can see which slide you are on and do changes to your site accordingly. I hope this is pointing you in the right direction.

<script>
jQuery(window).on('fpOnLeave', function(event, data){
    console.log('event', event);
    console.log('data', data);
});
</script>

[arminunruh]

hey MAN!

I just realized that there is an easier way to do what you want.

For pages where fullscreen slider is active you will always have body classes like that:

fp-viewing-0

the 0 can be a 1, 2, 3 etc. If you combine that class with your body slug-* class you can style your site title and menu as you want:

body.slug-yourpageslug.fp-viewing-0 .sitetitle{

}
body.slug-yourpageslug.fp-viewing-0 nav.primary{

}

Find out more about the slug body class here: http://laytheme.com/documentation.html#css-based-on-current-page

[MAN]

Awesome! Thanks!

[antonioprado]

@MAN Hi Man! Could you use different menu color for each slide? Can you give me some light about how to do it? I'm really lost about this... I'll really appreciate your help!

Thank you!!

[arminunruh]

hey antonio, can you show me the css code you are using to try and make the slides have different colors?

[antonioprado]

@arminunruh Hi Armin! Thank you for the answer! I think the code I'm using is wrong... i just follow the documentation about css based on current page and it worked very well, even on mobile size (burger icon, etc.), but when I try to do the same process on slides nothing happens... I copied the code you wrote:

body.slug-yourpageslug.fp-viewing-0 .sitetitle{

}
body.slug-yourpageslug.fp-viewing-0 nav.primary{

}

From my ignorant perspective, fp-viewing-0 make reference to the first slide right? fp-viewing-1 is the second, and so far... I really don't know :(

I copy the code I'm using:

.id-23.fp-viewing-0 .sitetitle{
color: white;
}
.id-23.fp-viewing-0 nav.primary{
color: white;
}

.id-23.fp-viewing-1 .sitetitle{
color: black;
}
.id-23.fp-viewing-1 nav.primary{
color: black;
}

Thank you!!! :D

[arminunruh]

Oh, I changed the html markup a bit with the latest updates. This way it should work:

body.fp-viewing-0 .sitetitle-txt-inner span{
    color: pink;
}
body.fp-viewing-0 nav.primary a{
    color: pink;
}

[antonioprado]

@arminunruh Hello Armin!! Thank you very much! It works very well!!! :D

The only thing is when "Scrolling down in the last section scrolls down to the first section" is activated, when the last slide goes to the first one, this "effect" does not work... Is there any way for it to work when this option is activated?

Thank you again!!

[mariusjopen]

Hey Antonio!

I was able to reproduce the issue you were talking about.
In fact you are right.

When you activate the "Scrolling down in the last section scrolls down to the first section" and scroll down the .fp-viewing-0 changes to .fp-viewing-1 and does not change back to .fp-viewing-0 when you continue scrolling more down.

That means that your custom CSS code does not work anymore:

body.fp-viewing-0 .sitetitle-txt-inner span{
    color: pink;
}
body.fp-viewing-0 nav.primary a{
    color: pink;
}

What you can do is to activate the CSS also for the second slide. That is a compromise until we will have fixed that issue.

body.fp-viewing-0 .sitetitle-txt-inner span,
body.fp-viewing-1 .sitetitle-txt-inner span{
    color: pink;
}

body.fp-viewing-0 nav.primary a,
body.fp-viewing-1 nav.primary a{
    color: pink;
}

I hope I could help!

Let us know if you have further questions!

All the best!

Marius

[antonioprado]

@mariusjopen Hello Marius! Wow! That really helps! Thank you very much for the answer and the patient! Both of you!

Have a nice week guys! :)

[mariusjopen]

Hi Antonio!

Great! Very happy to hear :-)

[adam]

Hey guys, this post has been really helpful in getting the navbar and site title changing. I am trying to get the same change happening on text within a full-page slider however the only success I have had is when I target the universal setting of my text-formats.

for example

body.fp-viewing-1 .text .lay-textformat-parent > *, ._Default, ._Heading {
color: #FFFFFF;
}

This works however it doesn't change out when landing on a different slide. Basically I need to target slide 1, 3, 5, 7 and 8.

Any help would be great!

Thank you

[mariusjopen]

Hey Adam,

it is a bit complicated to solve this issue without actually knowing the site.

Can you provide us with a link?

All the best!

Marius

[dgknkrpnr]

@mariusjopen said in Different menu color for each slide on Fullscreen slider:

Hey Antonio!

I was able to reproduce the issue you were talking about.
In fact you are right.

When you activate the "Scrolling down in the last section scrolls down to the first section" and scroll down the .fp-viewing-0 changes to .fp-viewing-1 and does not change back to .fp-viewing-0 when you continue scrolling more down.

That means that your custom CSS code does not work anymore:

body.fp-viewing-0 .sitetitle-txt-inner span{
    color: pink;
}
body.fp-viewing-0 nav.primary a{
    color: pink;
}

What you can do is to activate the CSS also for the second slide. That is a compromise until we will have fixed that issue.

body.fp-viewing-0 .sitetitle-txt-inner span,
body.fp-viewing-1 .sitetitle-txt-inner span{
    color: pink;
}

body.fp-viewing-0 nav.primary a,
body.fp-viewing-1 nav.primary a{
    color: pink;
}

I hope I could help!

Let us know if you have further questions!

All the best!

Marius

@mariusjopen Is there a way to use this technique without using fp-viewing classes? I want to give a single class to all rows with same color using "Set HTML class & ID" option (lets name this class "blackbg"). And I want to change menu color when we are looking to blackbg slide (or when it have "active" class too)

If I use fp-viewing classes I have to write different slug classes for every project in custom css because slides with black background isn't have same order. My projects have different slide count.

[mariusjopen]

Hi dgknkrpnr!

Well, if you want to have a specific color for a slide you need to use those classes. They are the only class which allows you to style this specific slide.

But maybe that helps:

Then you can call each row by its own.

Best!

Marius

[Hayo Gebauer]

Is it possible to delay the color switching?
The first slide I have the menu/title in white (opposed to black like in the rest of the slides)
When i scroll from the first slide, the white instantly switches to black, but it would be nice to have a 700ms delay (duration of the fullscreen slide)

edit: adding "transition-delay: 700ms" does not work, it delays the appearance of the white font by 700ms, but not the switching to black.

[mariusjopen]

Dear @Hayo-Gebauer
with jQuery you can add a wait or delay effect.

Best!

Marius

[Hayo Gebauer]

@arminunruh This doesn't work in the current version of Laytheme, am I right?

[mariusjopen]

Dear @MAN
you probably need to hack yourself through this…

Best!

Marius