-
-
I have a sticky menu that is 124px and when using anchor links, the links go the correct position but 124px of the page are covered by the menu. Is it possible to offset the anchor link by the 124px of the menu?
Another issue is on mobile, anchor tags are causing a page refresh. I noticed this was happening on the full site but I fixed it by turning on smooth scrolling. This did not resolve the mobile issue.
-
Follow up on the second issue. I was wrong, the issue with anchor links causing a refresh happens on all devices regardless of smooth scrolling disabled. If I type the URL directly in the browser with the anchor link it works, using the menu causes the page to refresh.
-
Hello,
Can you please share with me an URL so i can check the issue?
Thanks
-
-
Hello,
Hope I understand your issue, please try this custom JS code for this:
// The function actually applying the offset function offsetAnchor() { if (location.hash.length !== 0) { window.scrollTo(window.scrollX, window.scrollY - 124); } } // Captures click events of all <a> elements with href starting with # $(document).on('click', 'a[href^="#"]', function(event) { // Click events are captured before hashchanges. Timeout // causes offsetAnchor to be called after the page jump. window.setTimeout(function() { offsetAnchor(); }, 0); }); // Set the offset when entering page with hash present in the url window.setTimeout(offsetAnchor, 0);
Hope this works, let me know
-
Where should the javascript be placed? I placed this in the header but it doesn’t seem to work. Please check and let me know.
-
Add this code before this line:
self.updateConfig();
on js/codeless-main.jslet me know
Thanks
-
This corrected the sticky menu offset.
I still have two remaining issues:
1. Anchor links are still refreshing the page. If you click an anchor link from the menu, it will cause the page to refresh. I’m fairly certain this is being caused by javascript.
2. On any of the galleries. Click an image in a gallery and it skips the lightbox and redirect directly to the image. I have not customized anything within the theme to cause this.
-
1. Try to set the page that you don’t need to be refreshed as a one page, this can fix the issue.
2. This is a theme bug, added in update list, for now do this:
on js/codeless-main.js go to PageTransition function and replace this line:
linkElement : 'a:not([target="_blank"]):not([href^="#"]):not(.lightbox-gallery):not(.entry-link.lightbox):not([class^="ilightbox-"]):not(.zoom):not(.prettyphoto):not(.anchorSubmenu)'
with:
linkElement : 'a:not([target="_blank"]):not([href^="#"]):not(.lightbox-gallery):not(.entry-link.lightbox):not([class^="ilightbox-"]):not(.zoom):not(.prettyphoto):not(.anchorSubmenu):not(.entry-lightbox)'
-
Thank you. That fixed the gallery bug.
What do you mean by ‘<span style=”color: #4b4d4d; font-family: Raleway; font-size: 14px;”>set the page that you don’t need to be refreshed as a one page’?</span>
If you look at https://kylepieinthesky.com/activities/
I have # links located on the page which work correctly. The menu items do not work though. -
Try to set this page as an One Page. Click Edit Page -> Go to Page Options -> Activate One page
-
So that works with page transitions turned off. With them turned on, it still does a weird refresh. Is it possible to use with transitions? Not a huge deal but I thought I’d at least ask. You can see what I’m talking about on:
-
I think i found a solution
On this line
linkElement : 'a:not([target="_blank"]):not([href^="#"]):not(.lightbox-gallery):not(.entry-link.lightbox):not([class^="ilightbox-"]):not(.zoom):not(.prettyphoto):not(.anchorSubmenu):not(.entry-lightbox)'
Replace with:
linkElement : 'a:not([target="_blank"]):not([href^="#"]):not(.lightbox-gallery):not(.entry-link.lightbox):not([class^="ilightbox-"]):not(.zoom):not(.prettyphoto):not(.anchorSubmenu):not(.entry-lightbox):not([href^="/activities#"])'
-
This worked but has caused the offset to get off after two clicks.
-
Oh, how it’s possible ?!
Sorry for the late response we was on holiday yestarday.
Please try to edit this code:
$(document).on('click', 'a[href^="#"]', function(event) { // Click events are captured before hashchanges. Timeout // causes offsetAnchor to be called after the page jump. window.setTimeout(function() { offsetAnchor(); }, 0); });
the a[href^=”#”] part replace with
a[href^=”/activities#”]Let me know
Thanks
-
I think I correctly added it but it still seems to be having the same problem.
-
Maybe now that we have set that page as a one page we don’t need anymore this code:
// The function actually applying the offset function offsetAnchor() { if (location.hash.length !== 0) { window.scrollTo(window.scrollX, window.scrollY - 124); } } // Captures click events of all <a> elements with href starting with # $(document).on('click', 'a[href^="#"]', function(event) { // Click events are captured before hashchanges. Timeout // causes offsetAnchor to be called after the page jump. window.setTimeout(function() { offsetAnchor(); }, 0); }); // Set the offset when entering page with hash present in the url window.setTimeout(offsetAnchor, 0);
Try to remove that code and hard refresh. If this doesn’t work please send me credentials and FTP access so I can make some tests directly into your website.
Thanks
-
-
-
Looks great. Thank you so much. The support for your theme is top notch.
-
We are happy that you have resolved all your issue.
Please if you have time to rate our theme with 5 stars it will be great:
https://themeforest.net/downloadsThank You :)
-
You must be logged in to reply to this topic.