Community Forums › Forums › Archived Forums › General Discussion › Jump links not working properly on Monochrome pro theme
Tagged: jump links, monochrome theme
- This topic has 6 replies, 3 voices, and was last updated 6 years, 1 month ago by Victor Font.
-
AuthorPosts
-
March 22, 2018 at 2:17 am #218228inconiteMember
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.htmlMarch 23, 2018 at 8:39 am #218278Victor FontModeratorSee 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?March 23, 2018 at 9:03 am #218280NickParticipantTo 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; }
March 23, 2018 at 10:29 am #218284Victor FontModeratorSorry, 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?March 24, 2018 at 7:39 pm #218311inconiteMemberThank for reply!
I created a js fil to the following path
wp-content/themes/monochrome-pro/js/fixscroll.jsnow what should I do to link that in function.php?
March 24, 2018 at 10:42 pm #218313inconiteMemberAs 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
March 26, 2018 at 1:39 am #218325Victor FontModeratorLeave 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? -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.