Synchronise colour change in navbar with background

---

I am currently working on a site where the About page will have a different background colour, navbar and site title. Please see links below:

Homepage
http://foolscap-editions.com/homepage

About page
http://foolscap-editions.com/about

So when you transition between the two pages currently the background colour of the nav bar fades in quicker than the background of the page so feels slightly clunky. Is there a way to avoid this / synchronise?

Currently I am using the following code:

/* navbar colour about page*/
body[data-type="page"][data-id="333"] .navbar{
background-color: #f28000 !important;
}

/* site title text colour about page*/
body[data-type="page"][data-id="333"] ._Bold {
color: #ffffff !important;
}

/* menu text colour about page*/
body[data-type="page"][data-id="333"] ._Default{
color: #ffffff !important;
}

Did you try adding a transition: ease-in-out 1s; and play around with the time?
Here’s more info about transitions.

Thanks! Useful link. Managed to make a workaround by simply making navbar transparent, didn't think of that first time round!

👌
That’s the way to do it. Didn’t think of this at all…