[Resolved] Offset anchors with fixed header

[Bin]

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

[Tom]

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

a.smooth

With this:

li.smooth > a

[Bin]

<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!!!

[Tom]

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

[Bin]

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!

[Tom]

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.

[Bin]

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

[Bin]

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

[Tom]

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

[Heidi]

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;
}

[Tom]

Instead of a.practice, try div.practice.

[Tom]

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

[Michael]

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

Loving the theme down here in Australia!

[Author]

Posts