Change Bootstrap NavBar Image on Scroll when Awake

Website Templates
1

I purchased the template:
https://colorlib.com/preview/#autoroad

I’ve been playing around with it, I cannot figure out how to change the image source in the top menu, switching the white logo to a black logo during scroll. Here is a link to the sample page I’m working on: Camarillo Flight Instruction & Aircraft Rental

If you scroll the page you’ll notice that the logo changes the font format from WHITE FRONT W/ DARK BACKGROUND to BLACK FONT W/ White Background

Can someone point me in the right direction?

2

Hi there

Here is the image link: https://www.camarilloflightinstruction.com/sandbox/2020/images/CFI_white.png
just change the image :slight_smile:

3

Noda,
I’m not sure you understood the issue, the color wants to change from white to black depending on the state of scroll. If I change the image, then it will be wrong either before or after I scroll. How does simply changing the image as you suggested fix the issue?

4

HI there

Well, this is HTML template, if you want a different image for the sticky header you have to customize it if you want to change the style of the sticky menu you have to change the sticky menu style, to something like this:

.ftco-navbar-light.scrolled {
background: #5a5a5a !important;
}
.ftco-navbar-light.scrolled .nav-link {
color: #ffffff !important;
}