-
Posts
-
When the header shrinks my logo is not readable. All I want to know is what do I need to do to make a different logo image load when the header shrinks? because my logo will not look good when shrinked. I would rather make a different one for the small header.
for example fullsize header = logo.png
small header = smalllogo.png
Hi,
You can’t create a new logo for the shrink header. Can you give us a link to your website? Maybe we can fix the issue with CSS modification.
Regards,
Ismael
This is the website:
Hi,
Please edit js > avia.js then find this code
//check if the browser supports element rotation
function avia_header_size()
{
var win = $(window),
header = $('.fixed_header #header'),
elements = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),
el_height = $(elements).filter(':first').height(),
isMobile = 'ontouchstart' in document.documentElement,
scroll_top = $('#scroll-top-link'),
set_height = function()
{
var st = win.scrollTop(), newH = 0;
if(st < el_height/4)
{
newH = el_height - st;
//header.removeClass('shadow');
}
else
{
newH = el_height/2;
//header.addClass('shadow');
}
elements.css({height: newH + 'px', lineHeight: newH + 'px'});
}
if(!header.length) return false;
if(isMobile)
{
return false;
}
win.scroll(set_height);
set_height();
}Replace it with
//check if the browser supports element rotation
function avia_header_size()
{
var win = $(window),
header = $('.fixed_header #header'),
elements = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),
el_height = $(elements).filter(':first').height(),
isMobile = 'ontouchstart' in document.documentElement,
scroll_top = $('#scroll-top-link'),
set_height = function()
{
var st = win.scrollTop(), newH = 0;
if(st < el_height/1.5)
{
newH = el_height - st;
//header.removeClass('shadow');
}
else
{
newH = el_height/1.5;
//header.addClass('shadow');
}
elements.css({height: newH + 'px', lineHeight: newH + 'px'});
}
if(!header.length) return false;
if(isMobile)
{
return false;
}
win.scroll(set_height);
set_height();
}Regards,
Ismael
I used this code. Only concern is when scrolling slowly, the logo still gets really tiny then jumps to the smaller size. Is there a way to go from the larger size to the smaller one without the bump?
- The topic ‘Small logo’ is closed to new replies.