Different Image In NavBar Scroll Slider Not Showing

HTML & CSS
1

www.enflow.com/index.html

When a user SCROLLs down this web page my code has a navbar slider panel that appears (like freeze top row in excel) when the upper menu disappears as the user scrolls down.

If you right click and INSPECT the green images on the main menu or same on the slider scroll menu then you can see the two images and code.

brand-logo-light (main menu) and brand-logo-dark (slider menu) but only brand-logo-light shows in both areas.

I have code in this template web page that is supposed to swap out the large Logo image (brand-logo-light – in the stationary upper menu) with a smaller image for the navbar slider – brand-logo-dark.

But the image on the navbar slider does not swap out the large image for the smaller image but only shows the large image in the smaller width/height attributes which also fattens the Slider bar wider than normal.

What minor css/bootstrap/html error(s) am i making that does not toggle the images from main menu large image to smaller slider image.

thanks… CJ

2

I think this will sort out the problem as long as the code follows the original and not placed before it…

.rd-navbar.rd-navbar--is-stuck img.brand-logo-light{
display:none;
}
.rd-navbar.rd-navbar--is-stuck img.brand-logo-dark{
display:block;
}
1 Like
3

Wow… thank you Paul … Worked Perfectly in Chrome but not in Brave.

Any thoughts on that since pretty much same engine ?

1 Like
4

It should work everywhere if it worked once anywhere :slight_smile:

Maybe a cache issue perhaps?

2 Likes
5

Paul… i have seen you post links to articles, etc., that explain how you sourced a specific answer.

Do you have a link or recommendation on how you sourced my answer. I have done a lot of css but i could not figure this out and yet maybe it was simple ?

also do you have a link to your website… is that allowed ?

thanks again… CJ

6

Hi, @PaulOB usually place his solutions from here on CodePen:

https://codepen.io/paulobrien

1 Like
7

The best tool for debugging is already in your browser. :slight_smile: The developer tools help solve most problems quickly so it’s worth spending some time on them and learning how to use them to your best advantage.

A lot of questions involve specificity and the devtools make it easy to see where rules originate from and will help in debugging a problem.

My main methodology in debugging difficult problems is to isolate the problem as much as possible so that you can discount outside influences. Usually once you isolate the problem a solution is not that far away.

It also helps that I’ve spent 20 years on here answering similar questions:)

4 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.