New Front EN › Support Forums › Kanso Theme Support › Header on mobile
Tagged: header mobile ipad iphone shrink
- This topic has 2 replies, 2 voices, and was last updated 10 years, 3 months ago by satori.
-
AuthorPosts
-
June 20, 2014 at 7:48 am #3554thoughtonParticipant
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!
June 20, 2014 at 8:16 am #3557thoughtonParticipantHmm, 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, 3 months ago by thoughton.
June 23, 2014 at 12:13 pm #3573satoriKeymasterHey 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 -
AuthorPosts
- You must be logged in to reply to this topic.