Sticky Header Logo Size - Too Small - Support | Kriesi.at

Tagged: header, sticky

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

Author

Posts

July 27, 2016 at 3:03 am #665566

taratrask

Participant

How can I modify the sticky header so that the reduced logo size is not so small in relation to the full sized logo?

July 27, 2016 at 7:23 am #665619

Vinay

Inactive Moderator

Hey taratrask,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

.header-scrolled  {
	min-height:60px;
}
.header-scrolled .logo, .header-scrolled .logo img, .header-scrolled .logo a {	
	min-height:60px;
}

Best regards,
Vinay

July 27, 2016 at 4:17 pm #665799

taratrask

Participant

This semi-worked, but it still minimizes all the way (43px max height?) and then bounces up to the 60px max height.

July 27, 2016 at 10:30 pm #665973

taratrask

Participant

This max height appears to change dynamically when inspecting in chrome:

<img height="100" width="300" src="http://taratrask.com/wp-content/uploads/2016/02/300x100xTrask_Logo_Color-300x81.png.pagespeed.ic.RzJT0Lwg05.png" alt="Trask LLC" pagespeed_url_hash="842535546" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" style="max-height: 43px>

;">

I’m just not sure where to adjust this…

July 27, 2016 at 10:49 pm #665981

taratrask

Participant

Guessing somewhere in this piece of js?:

   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 && !isMobile)
                {
	                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'});
                }

July 30, 2016 at 2:20 am #666740

Ismael

Moderator

Hi,

Modify the following line:

logo.css({'maxHeight': newH + 'px'});

Define the value of the newH variable.

Best regards,
Ismael

August 8, 2016 at 5:00 pm #669930

taratrask

Participant

elements.css({'height': newH + 'px', 'lineHeight': newH + 'px'});
                	logo.css({'maxHeight': 60 + 'px'});

This does not appear to have any effect. Is this the correct syntax? Have you tested it?

EDIT: Pagespeed was caching and keeping my change from coming through. Unfortunately, making this change just locks the logo at that height, and does not allow it to scale at all.