Question

17

Change logo on scroll

rated 0 times [ 18] [ 1] / answers: 1 / hits: 7486 / 5 Years ago, mon, october 14, 2019, 12:00:00

I have this website: https://lapassion.000webhostapp.com/

My question is about the logo, it is white and when I scroll down a white bar appears, making the logo disappear.

I have this code on index.html

<div class=navbar-header>

    <a href=index.html><img src=images/logo.png></a>

</div>

And the css

.navbar img {

  margin-top: 15px;

  width: 100px;

  height: 50px;

}

And I need to change that img to another one that I already have in black.

What do I need to do?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dannyc

Add To Favorites

Follow

Total Points: 517

Total Questions: 106

Total Answers: 116

Location: Netherlands

Member since Mon, Jun 7, 2021

3 Years ago

answered 5 Years ago jerome · Accepted Answer

Using this CSS you can handle it

.navbar.navbar-default.navbar-fixed-top.affix .navbar-header img {

    background-color: black;

}

Instead of background , use the code to change the image src - if you wish to change the logo.

This CSS is set during sticky header / scrolling the class .affix-fixed changes to .affix. So you can target your CSS style their, no need of JS changes.

.navbar.navbar-default.navbar-fixed-top.affix .navbar-header img {

     content: url(https://www.google.com/logos/doodles/2019/joseph-plateaus-218th-birthday-5462347081580544-s.png);

}