Hello everybody
I was out of town, so I did not have the opportunity to try Guenni’s solutions. Between today and tomorrow I would like to compare my solution and Guenni’s and then draw conclusions. Give me please a couple of days before closing the thread.

Hello Guenni
First of all, I would like to thank you for all the interventions you make on this forum that have helped me over the years to solve various issues.
When you use General Layout > Logo And Main Menu > Left Sidebar you have three choices in the tab Sticky Sidebar Menu (You can choose if you want a sticky sidebar that does not scroll with the content):
1 – Never Sticky
2 – Always Sticky
3 – Sticky if Sidebar is smaller then the screen size, scroll otherwise
You have this choices only if you use the Left Sidebar Menu
If you switch to Right Sidebar Menu the options tab Sticky Sidebar Menu is not available and as Ismael wrote with CSS unfortunately the feature “Sticky if Sidebar is smaller then the screen size scroll otherwise” when the right sidebar is enabled is impossible to set.
So, for now I’ve solved the issue by adding a scrollbar to the header to have the menu visible in every screen height.

#header_main {
  overflow: auto !important;
  max-height: calc(100vh - 40px); /* the -40px works for me but it depends on the lenght of your header */
}

Of course it would be nicer to have a function to make it scrollable as in the Left Sidebar Menu without the sidebar but my knowledge of php and js is very poor
Best wishes
Manu

• This reply was modified 1 month, 4 weeks ago by manurimini.

Thank you Ismael
The website now seems to be scrolling quite smoothly.

Best Regards
Manu

• This reply was modified 4 months, 3 weeks ago by manurimini.

Hi Ismael,
After many tests on different installations, I have come to the conclusion that the lagging scrolling behavior is given by the function:
https://kriesi.at/documentation/enfold/fullwidth-sub-menu/#toggle-id-4

/**
 * Full Width Submenu active
 */

function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {      
     var sections = jQuery('.avia-section'),
         menu   = jQuery('.av-submenu-container'),
         nav_height = menu.outerHeight();
         jQuery(window).on('scroll', function() {
            var cur_pos = jQuery(this).scrollTop();
            sections.each(function() {
                var top = jQuery(this).offset().top - 300,
                    bottom = top + jQuery(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) {
                    menu.find('li').removeClass('active-menu-item');                    
                    menu.find('a[href="#' + jQuery(this).attr('id') + '"]').parent('li').addClass('active-menu-item');
                }
            });
        });
    });
 
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

Is there another way to set active on the ALB Fullwidth Sub Menu?
Thank you
Best Regards
Manu

Hi
Sorry Guenny 007 but I don’t understand how this solution, although very interesting, can help me. It may also be that I misunderstood how to use the files you kindly make available, but the links on the example page point to other pages, while I am trying to solve scrolling within the same page so that the anchorpoint content does not go under the Fullwidth Sub Menu of the ALB of tablets and mobiles.

Trying to resolve this issue, I had problems with pages scrolling in a jerky motion, but I figured out what my error was.
Mike had given me a function to solve the problem involving two screen widths < 989 and > 990.
Mike’s code works very well and gives no smooth scrolling problems.
I did, however, need a third screen width (> 768 < 989) because the Fullwidth Sub Menu of the ALB on mobile phones would go on two rows.
So I tried adding to the script:
else if ((width > 767 && width < 989)) {
At this point the scrolling of the site started to work horribly on all pages. It is obvious that I messed up something when I added the third screen width.
This is Mike’s code that works:

function custom_change_offset() { ?>
  <script>
(function($) {
	var width = $(window).width();
    if ((width < 989)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140 //offset
        }, 1000);
        return false;
      }
    }
    } 
    else if ((width > 990)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 150 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 150 //offset
        }, 1000);
        return false;
      }
    }
    }
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_change_offset', 99 );

And this is the code revised by me that makes the whole site scroll badly even though it puts the anchor points in the right place:

function custom_change_offset() { ?>
  <script>
(function($) {
	var width = $(window).width();
    if (width < 767)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 220 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 220 //offset
        }, 1000);
        return false;
      }
    }
    } 
	else if ((width > 768 && width < 989)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 170 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 170//offset
        }, 1000);
        return false;
      }
    }
    } 
   else if ((width > 990)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 180 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 180//offset
        }, 1000);
        return false;
      }
    }
    } 
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_change_offset', 99 );

If anyone can help me, I’d like to figure out where I went wrong and be able to use three different offsets for the three different screen widths.

• This reply was modified 5 months ago by manurimini.

Thank you Ismael
I only changed the code a little bit
if ((width > 768 && width < 990)) {
Now it works like a charme!
Best Regards
Manu

• This reply was modified 5 months, 4 weeks ago by manurimini.

Thank you Mike, it works perfectly! Do you think this code will be added in the next release?
For anyone who will use this code:
don’t forget to add

.grid-content {
cursor: pointer;
}

in your custom CSS

Great job Mike
Best Regards
Manu

• This reply was modified 3 years, 4 months ago by manurimini.

Hello Mike
I have tried your solution on different installations by using “Overwrite Portfolio Link setting” but it doen’t work if the Portfolio Grid is set on “Only Excerpt”.
In Private Content the credentials to access to a test installation.
In any case it would be usefull a function to automatize the process without adding in every portfolio page the custom link.
Best Regards
Manu

Hello Ismael

I have to correct my previous thread. The option Always Sticky works.
But the option “Sticky if Sidebar is smaller than the screen height, scroll otherwise” doesn’t. I have tested it on different installations.
You can easily check it on your own installation, but I still leave you access to mine in the private area.

Thank you for your help
Manu

• This reply was modified 3 years, 6 months ago by manurimini.