-
Posts
-
Hi Guys – Please visit http://thecaloriemythbook.com, note the logo in the header, scroll down, and note how the logo text becomes grainy and fuzzy (http://TheCalorieMythBook.com/wp-content/uploads/2013/08/resize.png). We’ve tried using png files and jpeg files, and a bunch of different sizes, but it still ends up grainy when resized. Any ideas on how to avoid this?
Hey,
Please edit js > avia.js, find this code:
if(st < el_height/2)
{
newH = el_height - st;
header.removeClass('header-scrolled');
}
else
{
newH = el_height/2;
header.addClass('header-scrolled');
}Replace it with:
if(st < el_height/1.5)
{
newH = el_height - st;
header.removeClass('header-scrolled');
}
else
{
newH = el_height/1.5;
header.addClass('header-scrolled');
}This will decrease the header into a much bigger size than before eliminating the grainy logo appearance. Please remove browser cache then reload the page.
Cheers,
Ismael
Hi Ismael – Thank you. I tried this but the logo still looks grainy and now there is an odd “jumping” experience happening with the logo in the header on scroll…see: http://thesmarterscienceofslim.com/wp-content/uploads/2013/08/jumpy-and-grainy.mp4
Hi stunna42,
Try uploading a logo file that starts at the actual dimensions it gets set to: 250px by 88px. Right now you are already starting with a compressed image and then compressing it even further.
Regards,
Devin
- The topic ‘any way to have logo not get grainy when the fixed header shrinks’ is closed to new replies.