Header on mobile

[thoughton]

This is about the header shrinking behaviour. On an iPad or iPhone the header is not fixed, it scrolls with the page. This is good. HOWEVER the logo still shrinks, even though it is off the page! The result of this behaviour goes like this:

1. Load the site
2. Swipe upwards to scroll down, after the initial swipe the iPad/iPhone does it’s simulated-inertia thing and continues scrolling for a second or two until it slows down and stops.
3. When the scrolling comes to as stop, the (not visible) header icon changes size, and causes the entire page to jump up 40 or 50 pixels!

This wiggle is quite annoying, and seems completely unnecessary. How can I disable the shrinking header on mobile devices? Thanks!

[thoughton]

Hmm, I thought I had read almost every post on this forum yesterday, but today I found this one which was quite useful.

Adding this to my Kanso-child style.css file:

@media only screen and (max-width: 767px) {
#logo img { max-height: 75px; }
}

This appears to have fixed the ‘wiggle’ problem on iPhone. I imagine changing the media query will fix it on iPad as well.

Andrii, can you see any problems with this approach? I would prefer to conditionally not load the relevant javascript if possible as that would help reduce page size (a battle I’ve been fighting! Down from 7.5MB to 4.3MB so far…)

• This reply was modified 10 years, 5 months ago by thoughton.

[satori]

Hey Thoughton,

First of all, I must apologize for the delay in my reply!

The issue you’ve brought up is indeed something that needs to be corrected. There are two ways to go about that:
– a purely CSS solution: please insert this piece of additional CSS into the “Style: Add Custom CSS” tab of the Theme Options panel:

@media only screen and (max-width: 1030px) {
body #main-header .smallheader, #header .small-logo { max-height: none !important; }
}

this will counter the effect of the class added to the header elements in order to shrink it on smaller screens.

– alternatively, you can implement a slightly cleaner jQuery solution (it has just several lines of additional code to the existing one, thus should not add any significant additional page load strain): please download this archive, unzip it, and upload the resulting files into the theme folder (/wp-content/themes/Kanso/) via ftp, replacing the existing files when prompted.

Please let me know if the code helps improve the header behaviour!

Sincerely,
Andrii / Satori Studio

[Author]

Posts