Anchors in Chrome

My anchors in Chrome link to a spot about 90px lower than they should. They work fine in Firefox and Safari. I tried deactivating all my plugins and that didn’t help. What could be causing this?

Hi Kathy,

Can you please update X theme too to avoid incompatibility issues? You do have X 7.0.3 and Cornerstone 4.0.4. X theme should be version 7.0.4. See our changelog here.

The most important, URL should be relative, like #voice instead of https://www.cooperativeownership.com/#voice.
Please edit it on Appearance > Menu.

Someone reported the same issue before that it is not working on Chrome too but has been fixed by reinstalling the theme. Please check again after theme update.

Let us know how this goes.

Thank you for getting back to me. I believe I’ve got everything updated, but this is still not working correctly in Chrome. Is there anything else we can do?

Hey Kathy,

In that case please check the following:

  1. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

  2. If you’re using a caching plugin, clear all caches including browser cache then deactivate your caching plugin and other optimization plugins. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  3. Remove custom CSS and JavaScript (take a complete backup of your custom codes first).

If nothing works then you can add the following code in the Theme Options > CSS:

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $body.on('touchmove', function() {
      dragging = true;
  } );
  
  $body.on('touchstart', function() {
      dragging = false;
  } );


  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
	return false;
  }


  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        
        if (dragging) {
            return;
        }
        
        animateOffset($el, 850, 'xEaseInOutExpo');
		if(!$('.x-nav-wrap-mobile').hasClass('.x-collapsed')) {
			$('.x-btn-navbar').click();
		}
		return false;
      }
    }
  });
});

Hope this helps!

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