Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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=0

    #755599

    what 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

    #755600

    see 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

    #755601

    Halligalli!

    Let’s see if I can manage this, Danke Günther!

    #776062

    Great work, thank you Guenni007!

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

You must be logged in to reply to this topic.