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

    Hello,

    I have two problems with my logo. I’m using fixed header with height of 130px and One page Portfolio type of Home page.

    1. When you start scroll down, logo is shrinking to height of 54px and then jump to 90px (I have change avia.js, read below), and should stay at 90px.
    2. When I check site on mobile, logo is not resized to smaller size, remain big but cut off.

    My logo is 489×118 and I have add this in custom.css:

    #header_main .container, .main_menu ul:first-child > li a {
        height: 130px;
        line-height: 130px;
    }
    
    .fixed_header #main {
        padding-top: 130px;
    }

    In /js/avia.js I have change this:

    if(st < el_height/1.4) // was 2
                    {
                        newH = el_height - st;
                        header.removeClass('header-scrolled');
                    }
                    else
                    {
                        newH = el_height/1.4; // was 2
                        header.addClass('header-scrolled');
                    }

    Also, I have try this solution:

    http://www.kriesi.at/support/topic/change-logo-image-for-scrolled-header/#post-188003

    for

    el_height       = $(elements).filter(':first').height(),
    
    el_height       = 130,

    but non of them didn’t work for me. Test site is here – http://dev.bogosavljev.com/
    Any help on this?

    • This topic was modified 8 months, 1 week ago by  bogosavljev.
    #200295

    Hey bogosavljev!

    You can use this on Quick CSS to resize the logo on mobile view:

    @media only screen and (max-width: 767px) {
    .responsive .logo {
    height: 60px;
    }
    }

    Regards,
    Ismael

    #200298

    Thanks Ismael,

    that’s do the trick!

    What about my question 1?

    Did you try to scroll page down and see how logo is resized to e.g 50px and then get back to 90px?

    I need to stay 90px after I start to scroll page down…

    #200330

    Hey!

    Did you modify anything on the theme files? Are there any css modifications that you added for the logo?

    Regards,
    Ismael

    #200388

    No, I don’t have any other css modification for the logo except this:

    #header_main .container, .main_menu ul:first-child > li a {
        height: 130px;
        line-height: 130px;
    }
    
    .fixed_header #main {
        padding-top: 130px;
    }

    and this in avia.js:

    if(st < el_height/1.4) // was 2
                    {
                        newH = el_height - st;
                        header.removeClass('header-scrolled');
                    }
                    else
                    {
                        newH = el_height/1.4; // was 2
                        header.addClass('header-scrolled');
                    }
    #200403

    Resolved!

    I have change in avia.js this:

    if(st < el_height/6) // was 2
                    {
                        newH = el_height - st;
                        header.removeClass('header-scrolled');
                    }
                    else
                    {
                        newH = el_height/1.3; // was 2
                        header.addClass('header-scrolled');
                    }
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Logo does not resize on mobile’ is closed to new replies.