Offset anchors with fixed header

Yes, I did. Now it works fine for all links EXCEPT the top menu! There I put "smooth" to the customizer option for menu classes. Please have a look at: http://www.anonymio.de

Ah, for it to work with the menu you might have to replace this:

a.smooth

With this:

li.smooth > a

<script>
jQuery(function($) {
	$('li.smooth > 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 - 70
				}, 500);
				return false;
			}
		}
	});
});
</script>

Does NOT work at all!!!

You're using a caching plugin. You need to clear the cache after making any changes like this.

Sure. Even with clear cache there is no offset-effect. But ONLY by clicking the TOP-Menu button on the same page! Coming from a diffent page it works!

I'm still seeing the old code in your HTML.

For testing, it would be best if your cleared your caching plugin and then disabled it completely.

Yes, because I put in a.smooth again. li.smooth > a DEFINITELY doesn't work on my site! Tested completely without cache... 😰

So, at the end I am using 'smooth' AND <div id="test"><!-- anchor --></div> in a separate section with zero padding. Works fine so far. BUT there is still a strange behavior while clicking the top menu buttons. Sometimes they do not hit exactly the aimed anchor on a different page! If you have a solution for that issue, please don't hesitate to tell me! ;)) Regards, Bin

Any chance you can show me with some details? Like which link to click etc..

Hi All,

I am so close to getting this to work, but can't quite. I am using a left sidebar on a page with sections. The left sidebar contains the secondary menu (the same menu is also a slide-out menu).

Section Page (Resources) on My Website

I've got each section labeled with it's own custom id, e.g. "business-law".
I've got each section labeled with the same custom class of "practice"

I've added this code to the css, but can't get it to work for either the slide-out menu or the secondary nav menu. what am I missing? Thanks for advice as always.

a.practice:before {
    display: block;
    position: relative;
    top: -100px; /* height of sticky navigation */
    visibility: hidden;
}

Instead of a.practice, try div.practice.

GP Premium now has a native smooth scroll option, which you can find in "Customize > General".

Thanks Tom! This just saved me some extra grey hairs. Perfect solution.

Loving the theme down here in Australia!