Offset is not working for me..

Hello,

The selector should be .mega-menu-toggle as the “mega-menu-toggle” is a class name. This said, I can’t really tell why the offset doesn’t work. Maybe the “mega-menu-toggle” element shouldn’t be the offset selector (what’s the height of the .mega-menu-toggle element?) or maybe some other mega menu script overwrites smooth scrolling.

Try going into plugin settings and enable “Prevent other scripts from handling plugin’s links” option and see if it fixes the issue.

If I could see your site/page I’d be able to check what happens and provide an exact solution (not sure if you can post or send me your URL).

Sure you can contact me here.

I checked your page and the problem is that you have 2 independent sticky menus: 1)the standard site header nav menu and 2)the secondary mega menu. That’s why the single offset selector cannot work. You’ll need to compensate for both menus but those 2 menus are not within a single element, so there’s no way to calculate their height via a single selector. 

The only way to do this is either add a fixed number of pixels (e.g. 400) or try adding an extra js script in your theme/child-theme header.php. If you can/want do this, edit your theme’s header.php and add the following inside the head tag: 

<script>
(function($){
    window.ps2id_special_params={ offset: _ps2idCalcOffset() };
    function _ps2idCalcOffset(){
        return $(".site-header.sticky").outerHeight(true) + $(".mega-menu-wrap").outerHeight(true) + 100;
    }
})(jQuery);
</script>

The above will calculate both sticky menus height and add extra pixels (e.g. 100) for the space between them. 

Another way would be to use plugin’s advanced offset via the “Auto-generate #ps2id-dummy-offset element” option. You’ll have to enable this option and then style (via CSS) the #ps2id-dummy-offset element to match both sticky menus combined height. You can see more info about the feature here: 
http://manos.malihu.gr/page-scroll-to-id-for-wordpress/#plugin-settings-offset-dummy

Let me know 🙂 

• This reply was modified 4 years, 9 months ago by malihu.

@austin113 The problem with the new menu is that it does not contain link elements (</a>). It only contains li and div elements that are handled by another script.

“Page scroll to id” works only with normal links with actual URLs (like the ones you had before). It cannot work with custom elements from other scripts.

Can you make the 3 boxes links, with URLs #consult, #mentor etc.?

If you can change the boxes to normal links (i.e. anchor elements), the js script I posted before should change to:

(function($){
	window.ps2id_special_params={ offset: _ps2idCalcOffset() };
	function _ps2idCalcOffset(){
		return $(".site-header.sticky").outerHeight(true) + $("#pg-241-1").outerHeight(true) + 100;
	}
})(jQuery);

• This reply was modified 4 years, 9 months ago by malihu.

Ok. The html has changed a bit so try changing the script to:

(function($){
	window.ps2id_special_params={ offset: _ps2idCalcOffset() };
	function _ps2idCalcOffset(){
		return $(".site-header.sticky").outerHeight(true) + $("#pg-241-1 > .is_sticky").outerHeight(true) + 100;
	}
})(jQuery);

Can you try placing the js code in your header.php after the wp_head(); function?

OK, we probably need to use a different approach, like using plugin’s “Auto-generate #ps2id-dummy-offset element” option.

For this we would need to remove the custom js script from the header.php and enable the “Auto-generate #ps2id-dummy-offset element” option in plugin settings. Then, add the following CSS:

#ps2id-dummy-offset{
  /* site header height + horizontal strip height + links height */
  height: calc(196px + 62px + 197px);
}
@media only screen and (min-width: 768px){
  #ps2id-dummy-offset{
    /* some other offset for mobile */
  }
}

This way we can simulate the 3 different sticky elements heights into a single element (#ps2id-dummy-offset) height.

site header and horizontal strip heights seem to remain the same in desktop and mobile. The 3 links boxes should change on mobile, as right now they occupy all screen.

You’re welcome! Glad I helped 🙂
I’m marking this as resolved but if you need more help, let me know.