Jump links not working properly on Monochrome pro theme

[inconite]

Hi,

I purchased Monochrome theme and Genesis framework few days ago. The theme is really awesome but there is a problem with jump links.

When you click on a jump link, the action happens but about 100px of content gets hidden. Even a part of the fixed banner at the sidebar gets hidden.

Example page is linked below.

On that page, scroll down to "Page contents" and click on the jump link, you will notice the problem.

Ofcourse, I made some edits in the CSS file but the problem is related to the theme itself.
You can confirm that by replacing the below URL. [www with test] (Theme is installed there with no edits)

How can I solve this bug?

https://www.inconite.com/best-paid-online-survey-jobs.html

[Victor Font]

See this post for the answer: https://www.studiopress.community/topic/jump-links-not-working-on-chrome/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Nick]

To prevent the target link appearing under the sticky header, you can try adding this CSS to your theme or to Appearance -> Customize -> Additional CSS:

:target:before {
	content: "";
	display: block;
	height: 70px;
	margin: -70px 0 0;
}

[Victor Font]

Sorry, I didn't read your post thoroughly. Here's a jQuery script that will fix the problem:

(function( $ ) {

	// Make sure JS is enabled.
	document.documentElement.className = 'js';

	$(document).ready(function() {

		$( 'a[href*=#]:not([href=#])' ).click(function() {

			if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

				var target = $(this.hash), admin_offset, header_height, offset;
				target = target.length ? target : $( '[name=' + this.hash.slice(1) + ']' );

				admin_offset = $("body").hasClass("admin-bar") ? 32 : 0;
				header_height = ($('header.site-header').css("position") === "fixed") ? $('header.site-header').outerHeight() : 0;
				offset = header_height + admin_offset;

				if (target.length) {

					$( 'html,body' ).animate({
						scrollTop: target.offset().top - offset
					}, 1000);

					return false;
				}
			}
		});
	});
})( jQuery );

Create a .js file to hold this code and enqueue is in functions.php. It will calculate the offset of the sticky header and adjust the scroll accordingly.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[inconite]

Thank for reply!

I created a js fil to the following path
wp-content/themes/monochrome-pro/js/fixscroll.js

now what should I do to link that in function.php?

[inconite]

As per the response I got from support, I added that code in the footer script and it's working. Thanks a lot!

But I would like to use that code from external js file to function.php. I believe that it will help in SEO.

Thanks

[Victor Font]

Leave it where it is. Moving it to functions.php won't matter for SEO.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts