Hello there,
You can replace the default image with background image upon scrolling which can be done by adding the following CSS code into Appearance > Customize > Additional CSS:
.float-header .col-md-4 a img{
display: none;
}
.float-header .col-md-4 a{
display: inline-block;
width: 100px; /* Logo image width */
height: 90px; /* Logo image height */
background-image: url('http://yoursite.com/path/to/your/logo.png');
background-size: contain;
background-repeat: no-repeat;
}
Regards,
Kharis
Thread Starter
gawra
(@gawra)
thank you @kharisblank, a new logo has been placed on floating header but the main logo is also showing on it. how do i hide it?
Hello there,
Please share your site URL here, so I can have a look and correct the code.
Regards,
Kharis
Thread Starter
gawra
(@gawra)
it was due to some caching bug, its working fine now. also i need to change main logo on each screen view except desktop view.
Site URL- http://samarthlawgroup.com
Hello there,
You can use the following CSS code:
@media only screen and (max-width:1024px) {
.site-header .col-md-4 a img{
display: none;
}
.site-header.col-md-4 a{
display: inline-block;
width: 100px; /* Logo image width */
height: 90px; /* Logo image height */
background-image: url('http://yoursite.com/path/to/your/logo.png');
background-size: contain;
background-repeat: no-repeat;
}
}
Regards,
Kharis
Thread Starter
gawra
(@gawra)
Hello @kharisblank ,
above css code hide the main logo from all screen views except desktop view but the new logo is not showing up. am i doing anything wrong?
Thread Starter
gawra
(@gawra)
found an alternative, thank you for your assistance.
You’re welcome and best wishes!
