Anchor links are scrolling too far

Support
#1

I recently discovered anchor links within pages are scrolling too far and the navbar at the top is covering part of the section the link sends you too. How can I adjust this?

see: https://millscanvas.com/awnings/
click on request a quote and it scrolls down to “contact us” section however it is scrolled down too far and the navbar is covering the top part of the section.

Thank you

#3

You replied to the wrong thread. This information does not apply to my problem. See original post for what i need help with.

#4

Hello @rlmills3rd,

Sorry for the confusion. I have investigated the issue and I found out that you have added this custom JS:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "65px");
			$('.x-navbar-inner').css("min-height", "65px");
                        $('.x-brand.img').css("margin-top", "5px");
			$('.x-brand img').css("width", "100px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "33px", "height": "35px"});
		} else {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "125px");
			$('.x-navbar-inner').css("min-height", "65px");
                        $('.x-brand.img').css("margin-top", "5px");
			$('.x-brand img').css("width", "175px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "60px", "height": "100px"});
		}
	});
});

This JS code directly affects how the One Page Navigation on the page. Please remove this code first while we are troubleshooting the issue.

Be advised that custom coding is beyond the scope of our support. If your custom code is creating a conflict or messing up the themes features and functionality, you may need to contact the creator of the code or that you contact a 3rd party developer if you are not familiar with coding.

Best Regards.

#5

Hello:

A couple of things I want to note:

Firstly, that JS code was provided to me by themeco support when I built the website. Secondly, all this code does is shrink the size of the navbar when the user scrolls.

Regardless of that fact, I have removed the code on my dev site, and it does not resolve the issue. It actually makes the issue worse as the navbar is covering even more of the section.

I will add a link to the dev site in a secure note.

#6

Hello @rlmills3rd,

Now that you have remove the code, please go to Cornerstone > Theme Options > Headers > Navbar and make sure to set the Navbar Top Height to at least 140 pixels because this is the actual navbar height at the moment. If this value would fix the issue, then you will need to modify the given JS code and change the height in the code from 125px into 140px instead.

Be advised that custom coding is already beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance. Even if the custom JS code were previously given by a Themeco staff, you still have the responsibility to maintain the code and make sure that this will work with the latest updates of the theme.

Kindly let us know how it goes.

#7

Hello,

I’ve done as suggested. I have removed the custom JS and set navbar top height to 140 pixels. There is no change and the issue still persists. See previous comment for secure note to link to dev site.

Any other ideas? It’s not the custom code or the height of the navbar.

Thanks

#8

Hi @rlmills3rd,

Thanks for reaching out.
The issue you mentioned here has been already resolved in the latest release. If you are still having this issue, there might the improper update of Cornerstone, I would suggest you follow the below steps to troubleshoot.

  1. Delete the Cornerstone
  2. After deletion please use the link in the dashboard to automatically install the Cornerstone.

If that does not work for you, you can find some alternative solutions in following threads.

NOTE: Please remember that this code are sample code, and it varies case to case, and we can’t guaranteed it works for you.

Thanks

#9

Cornerstone reload did not work. That thread you provided is a solution for a completely different issue and does not help resolve mine. The issue clearly hasnt been resolved in the latest release if I am still having problems with it, no?

#10

Hi @rlmills3rd,

The problem you are having is due to the offset calculation for the Sticky Menu for One-page Navigation which has been resolved in the last release. The referenced thread also shows a probable solution for that, I would suggest you try the code provided in the reference thread and let us know if that resolves your issue.

Thanks

#11

I’m not using one page navigation. It’s just an anchor link to another section. The same issue happens when you click an anchor link that takes you from one page to a section on a completely different page as well. (see secure note for example)

I’ll try the other code but im wondering if this is a separate issue.

#12

Hello @rlmills3rd,

We have investigated the issue and we believe that this is a bug in the latest release. This has already been added to our issue tracker and our developers has been inform. I cannot make any promises relating to a fix at this stage. I will add a note to the tracker referencing your report though so our dev team can see there are multiple reports of the issue.

Please bear with us.

#14

@rlmills3rd - I ran into the same thing on a site I recently launched for a client.

While looking for a temporary fix, I stumbled across this old thread and the solution proposed in it worked for me. I should note that I didn’t have to enable the one page nav, because like you I wasn’t using it. I just tweaked the CSS to offset the height of my header.

#15

Hey @j0hnwat3rman,

Thanks for chiming in! It is good to know that you have figured out a way to resolved your issue.

Cheers.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.