-
AuthorPosts
-
March 4, 2017 at 11:09 am #755576
Hi,
There are unfortunately countless entries here in the blog, but which is the right Quick CSS if I would have reduced the header for tablets in the Screen Landscape Mode?
Page here: https://goo.gl/yG2pFc
Theme Options here:
https://www.dropbox.com/s/1lfip3tjrl6geoe/Screenshot%202017-03-04%2010.08.14.pdf?dl=0
and
https://www.dropbox.com/s/ooltbnrhwjwa5aa/Screenshot%202017-03-04%2010.08.23.pdf?dl=0March 4, 2017 at 2:08 pm #755599what is the problem – you miss the shrinking behavior on tabletts !
so your options are all good but there has to be a fix for it. I only knew one for ipad – if it works with other tabletts i don’t know.Put this to your functions.php of the child-theme:
function include_custom_js_file() { wp_enqueue_script( 'avia-main-child', get_stylesheet_directory_uri().'/js/shrink_fix.js', array('jquery', 'avia-default'), 2, true ); } add_action( 'wp_enqueue_scripts', 'include_custom_js_file', 100 );
copy the code and call it : shrink_fix.js(function($){ $(document).ready(function() { // avia_header_size function initialization avia_header_size(); }); // required auxiliary function for avia_header_size function av_change_class($element, change_method, class_name) { if($element[0].classList) { if(change_method == "add") { $element[0].classList.add(class_name); } else { $element[0].classList.remove(class_name); } } else { if(change_method == "add") { $element.addClass(class_name); } else { $element.removeClass(class_name); } } } // custom avia_header_size function avia_header_size() { var win = $(window), header = $('.html_header_top.html_header_sticky #header'), unsticktop = $('.av_header_unstick_top'); if(!header.length && !unsticktop.length) return; var logo = $('#header_main .container .logo img, #header_main .container .logo a'), elements = $('#header_main .container:not(#header_main_alternate>.container), #header_main .main_menu ul:first-child > li > a:not(.avia_mega_div a, #header_main_alternate a), #header_main #menu-item-shop .cart_dropdown_link'), el_height = $(elements).filter(':first').height(), isMobile = $.avia_utilities.isMobile, scroll_top = $('#scroll-top-link'), transparent = header.is('.av_header_transparency'), shrinking = header.is('.av_header_shrinking'), topbar_height = header.find('#header_meta').outerHeight(), set_height = function() { var st = win.scrollTop(), newH = 0, st_real = st; if(unsticktop) st -= topbar_height; if(st < 0) st = 0; if(shrinking) // in the original one, there's a !isMobile here { if(st < el_height/2) { newH = el_height - st; if(st <= 0){ newH = el_height; } av_change_class(header, 'remove', 'header-scrolled'); //header.removeClass('header-scrolled'); } else { newH = el_height/2; //header.addClass('header-scrolled'); av_change_class(header, 'add', 'header-scrolled'); } if(st - 30 < el_height) { av_change_class(header, 'remove', 'header-scrolled-full'); } else { av_change_class(header, 'add', 'header-scrolled-full'); } elements.css({'height': newH + 'px', 'lineHeight': newH + 'px'}); logo.css({'maxHeight': newH + 'px'}); } if(unsticktop.length) { if( st <= 0) { if(st_real <= 0) st_real = 0; unsticktop.css({"margin-top":"-"+st_real+"px"}); } else { unsticktop.css({"margin-top":"-"+topbar_height+"px"}); } } if(transparent) { if(st > 50) { //header.removeClass('av_header_transparency'); av_change_class(header, 'remove', 'av_header_transparency'); } else { //header.addClass('av_header_transparency'); av_change_class(header, 'add', 'av_header_transparency'); } } } if($('body').is('.avia_deactivate_menu_resize')) shrinking = false; if(!transparent && !shrinking && !unsticktop.length) return; win.on( 'debouncedresize', function(){ el_height = $(elements).attr('style',"").filter(':first').height(); set_height(); } ); win.on( 'scroll', function(){ window.requestAnimationFrame( set_height )} ); set_height(); } })(jQuery);
create in your Child-Theme folder a folder called js and upload that shrink_fix.js to it
after that the shrinking header works as on all desktop-pc
March 4, 2017 at 2:15 pm #755600see here the thread of mine with Josue Solution (same as above – only with a better name for that fild (js))
https://kriesi.at/support/topic/shrinking-header-on-ipad-does-not-work/#post-575345
March 4, 2017 at 2:16 pm #755601Halligalli!
Let’s see if I can manage this, Danke Günther!
April 11, 2017 at 2:44 pm #776062Great work, thank you Guenni007!
-
AuthorPosts
- You must be logged in to reply to this topic.