Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22992

    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

    #118163

    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

    #118164

    This is the website:

    http://goo.gl/dojKr

    #118165

    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

    #118166

    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?

    #118167

    Hi,

    Please remove browser cache then reload the page. It works fine on my end.

    Regards,

    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Small logo’ is closed to new replies.