Logo does not resize on mobile - Support | Kriesi.at

Tagged: logo, mobile, resize, shrinking logo

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
December 14, 2013 at 9:53 pm #200274
bogosavljev
Participant
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:
https://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 10 years, 11 months ago by bogosavljev.
December 15, 2013 at 2:05 am #200295
Ismael
Moderator
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
December 15, 2013 at 2:10 am #200298

bogosavljev
Participant

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…

December 15, 2013 at 3:29 am #200330

Ismael
Moderator

Hey!

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

Regards,
Ismael

December 15, 2013 at 11:20 am #200388
bogosavljev
Participant
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');
                }
```
December 15, 2013 at 1:12 pm #200403
bogosavljev
Participant
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');
                }
```
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

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