Top of website too high, hidden behind header - Support | Kriesi.at

Hi,

I have an issue which I find hard to explain, so I will do my best! ;)

It seems that the top of my website is too high. When I place an anchor on a page, the top of the content is hidden behind the header. You can try it on this page: https://www.fronikboerderij.nl/kom-langs/wat-is-waar/ (click on an hotspot on the main image).

I think it has to do with the code used for the shrinking header. I added this code because I want the bottom of the logo to disappear when scrolling. Which works. But in order to do so I set the header height fixed at 100px and added this code to js/avia-snippet-sticky-header.js (in child theme). This makes the header twice as high:

	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/1;
	                    //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);

My question is, how can I keep the shrinking header as it is, but mak the top of the pages lower: beneath the header instead of behind the header?

November 24, 2021 at 4:07 am #1330213

Ismael

Hey JantienM,

Thank you for the inquiry.

You can try this filter in the functions.php file to adjust the scroll offset or to adjust the position where the document lands after clicking an anchor and scrolling.

function avf_header_setting_filter_mod($header) {
	$header['header_scroll_offset'] = $header['header_scroll_offset'] - 100;
	return $header;
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);

Please make sure to purge the cache and refresh the browser before checking.

Best regards,
Ismael

November 24, 2021 at 9:53 am #1330267

Guenni007

besides that – what do you like to obtain by – that on a “shrinking” header?

newH = el_height/1;

Changing only this line – causes the header height to jump when it has covered the scroll distance.
Here you can see the mathematical background of the shrinking header : https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/

maybe it is better to hamper the shrinking via Enfold Options – header – Header Behavior : Shrinking Header

November 24, 2021 at 2:34 pm #1330311

@Ismael: What number do I need to adjust? I changed the 100 into 0, but that isn’t enough (it needs to go more down), I’m not familiar with these codes, does the – mean a minus and can I delete this?

@Guenni007: I want to obtain that the bottom of the logo disappears when scrolling, this way only the top of the logo stays visible (and the wooden shoes in the logo disappear). You suggested to use shrinking header in the Enfold option, but I already use that (it’s activated)

This reply was modified 2 years, 12 months ago by JantienM.

November 25, 2021 at 10:26 pm #1330525

Guenni007

i would create a svg ( vectorise ) of your logo – group the “wooden shoes” to a class and set them to display none on header-scrolled

November 26, 2021 at 7:36 am #1330546

Ismael

Hi,

Thank you for the update.

Looks like the page above does not exist or it is private. We may need to login to the site in order to check the anchor issue. This is what we get when visiting the “wat-is-waar” page.

OEPS…
Sorry, de pagina die je probeert te bereiken is niet gevonden.

Best regards,
Ismael

November 26, 2021 at 10:23 am #1330567

Oh sorry Ismael, I changed the website a bit, this is the correct link:

Wat kun je bij ons doen?

November 26, 2021 at 10:26 am #1330571

Okay, I’m not familiar with this css code. Could you provide it? Why does the image need to be an svg file? What’s different from a jpg?

Thanks a lot!

November 28, 2021 at 10:27 pm #1330757

Hi,
Thanks for the link to your site, have you tried removing your script above to see if that is the issue? I believe your script is more complicated that it needs to be, below I have linked to a test page where I have the header set to 100px:

and the header behavior set as sticky and not shrinking:

then I added your logo and this script to the end of my child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
    <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll >= 90 && width >= 768) {
    $('.av-logo-container > .inner-container').css({'overflow':'hidden'});
   } else {
    $('.av-logo-container > .inner-container').css({'overflow':'visible'});
   }
  });
})(jQuery); 
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

and this css in my General Styling ▸ Quick CSS field:

.logo, .logo * {
    max-height: 269px!important;
    height: 269px!important;
    width: 131px!important;
}

now the logo behaves like yours on scroll and the anchor links I added to the page land correctly and not behind the header.
Perhaps you could try this.

Best regards,
Mike

November 29, 2021 at 2:00 pm #1330834

Hi Mike,

Thanks for your help. I deleted and added all you said, but the anchor is still too high, as you can see on this page: https://www.fronikboerderij.nl/wat-kun-je-bij-ons-doen/

Also, the menu won’t work and collapse now when you’ve scrolled down on a page.

If you could help me solve this I would be very grateful ;-)

November 29, 2021 at 2:49 pm #1330842

Hi,
Please include an admin login in the Private Content area so we could examine closer.

Best regards,
Mike

November 29, 2021 at 3:38 pm #1330860

See below

November 30, 2021 at 2:32 pm #1331001

Hi,
Thank you for the login, to correct the logo interfering with the menu sub-menus I adjusted the script to this:


function hide_lower_half_of_logo_on_scroll() { ?>
    <script>
(function ($) { 
  $('.logo, .logo *').css({'max-height':'269px','height':'269px','width':'131px'});
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll >= 90 && width >= 768) {
    $('.logo, .logo *').css({'clip-path':'inset(0 0 63% 0)'});
   } else {
    $('.logo, .logo *').css({'clip-path':'none'});
   }
  });
})(jQuery); 
</script>
    <?php
}
add_action('wp_footer', 'hide_lower_half_of_logo_on_scroll');

Now the bottom half of the logo image is hidden with clip-path instead of overflow.

For the anchors landing behind the header you had this function with a negative 50, I changed it to a positive 25 and now it works correctly:

function avf_header_setting_filter_mod($header) {
	$header['header_scroll_offset'] = $header['header_scroll_offset'] + 25;
	return $header;
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);

please clear your browser cache and check.

Best regards,
Mike

November 30, 2021 at 3:25 pm #1331009

Thanks a lot Mike! This works great indeed!

Problem solved

December 1, 2021 at 5:11 am #1331077