inconsistent header height

[realokun]

Hi,

I see some odd behaviour in the dynamic header’s height calculations. When I load the page I see the header first appears with some extra bottom margin that is got removed with a slight delay. However sometimes that extra margin gets stuck, as per the attachment.

I tried both sticky and non-sticky top menu. Same difference.

To reproduce: load any page from http://www.spokescommute.com/ in Chrome and then refresh it. After refreshing the header gets the extra bottom margin. The Firefox seems to be removing it consistently.

Environment: OS X 10.9.4, Chrome 38.0.2125.122

Thanks,

-Victor

Attachments:

You must be logged in to view attached files.

[esahc]

I have this same exact issue.

[esahc]

I should add that we have the “Resize logo on scroll” option set to off. However, there seems to be a bug when refreshing, the page starts the menu in the “expanded” state and gets stuck.

In fact, I think the way this menu was designed, it always starts it in the expanded form, and then quickly resizes itself to the thinner form. I notice when my page loads times are a bit slow, I can see this happen, which is not desirable of course.

Thank you for any help you can provide

[InsomniacUVA]

Same problem. Also using Chrome. I think for some reason it thinks I’m viewing the page on Mobile Phone so it shrinks the header.

[esahc]

anyone else having this problem?

[realokun]

It makes me wonder about the true number of KLEO-based deployments 🙂

[Abe]

Hi, that happens rarely and only on Chrome.

I came up with a fix so please replace assets/js/app.min.js contents with the one attached and see how it goes

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

Attachments:

You must be logged in to view attached files.

[esahc]

I replaced the file but unfortunately it didn’t fix it.

With the new file, the header is no longer sticky, and it prevents the live notification mouseover and sub-menu items from showing. Also, the header is in the expanded size. Would it be possible to have it always show as the thin size?

I really appreciate your help and everything you guys do.

Below I will put my server details in private if you need them for testing

[esahc]

This reply has been set as private.

[esahc]

This reply has been set as private.

[realokun]

Hi Abe,

I also didn’t see any improvements after replacing app.min.js

Thanks,

-Victor

[realokun]

Interesting observation: if I remove the logo image, the header height stays in the “expanded” mode: lots of top and bottom padding. Why doesn’t it simply fits the content?

[Abe]

@realokun we set a default 88 height. In next update I am thinking of adding two options in Theme options – Header where you can set your desired header height and also another height for the scrolled header

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Abe]

@esahc this file does not exist on your server http://www.xxx.com/wp-content/themes/kleo/assets/js/app.min.js

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[esahc]

oh sorry, I forgot to remove the dash from your new file. That explains why the menu wasn’t working :p It’s renamed to app.min.js now.

Also, just now I replaced all the “88”‘s in the file with the size that I wanted, 44. That fixed it from getting stuck at 88px when refreshed. Thank you 🙂

It still does a quick resize from 88px to 44px when the page is refreshed, but I can live with that for now.

[realokun]

@Abe I’ve replaced all occurrences of height 88 in your version of app.min.js to the desired height of 60 pixels. I observe the same exact effect as @esahc: the header section first appears expanded to 88 and then jerks down to 60. Not super sexy but it works. If there is no further way to improve that, let’s close this ticket. Thank you for your help!

[esahc]

@realokun I figured out how to fix the header resizing. If you goto assets/css/app.min.css and do a search for 88, the first match will take you to this line: .kleo-main-header .navbar-collapse>ul>li>a{line-height:88px}. Just change the height value to match your app.min.js height value, and now the header will always be that height. Hope it helps 🙂

[realokun]

@esahc thank you, you’ve nailed it man!

[Abe]

hello there
in 2.3 version coming these days we added a option to set the header size so that up/down won’t happen anymore. All you have to do is enable it from Theme options – Header options – Enable Custom header height and Save

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

Attachments:

You must be logged in to view attached files.

[realokun]

Cool! Thank you guys, you’re awesome! Closing the ticket.

-Victor

[Author]

Posts