[aileenfParticipant]

Hi,
I am using Icon on this site with fixed header and top bar. However, you’ll see from this link http://secura.weblines.com.au/for-sale/#the-lakes-holiday-park that when you visit a link which directs you to an anchor part way down the page… the anchor heading hides up underneath the fixed header.

Can you suggest a fix for this? Thank you!
Aileen

[aileenfParticipant]

Ah, I found the solution here https://community.theme.co/forums/topic/onepage-menu-links-anchor-links-dont-consider-header-hight/ after trying a different search of the forum.
Thanks!

[LelyModerator]

Hello Aileen,

Glad you found the solution.
Do let us know if you still have questions.

Always,
X

[aileenfParticipant]

Actually I do still have a problem. If you visit this page http://secura.weblines.com.au/residential-communities/ and click on any of the “View Properties” buttons, you’ll be taken to another page with an anchor to display a particular section of the page. There should be a header (White text on orange background). But it is still being scrolled up underneath the fixed navbar.

I am using this javascript to keep the topbar fixed as well as the navbar…. at the bottom is a little bit of code which I picked up which I thought would handle the anchor part. But it does not seem to work

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

    var $window     = $(window);
    var $this       = $(this);
    var $body       = $('body');
    var $navbar     = $('.x-navbar');
    var $topbar     = $('.x-topbar');
    var $logobar    = $('.x-logobar');
    var $navbarWrap = $('.x-navbar-fixed-top-active .masthead');

    if ( ! $body.hasClass('page-template-template-blank-3-php') && ! $body.hasClass('page-template-template-blank-6-php') && ! $body.hasClass('page-template-template-blank-7-php') && ! $body.hasClass('page-template-template-blank-8-php') ) {
    if ( $body.hasClass('x-boxed-layout-active') && $body.hasClass('x-navbar-fixed-top-active') && $body.hasClass('admin-bar') ) {
      $window.scroll(function() {
        var $adminbarHeight = $('#wpadminbar').outerHeight();
        var $menuTop        = $navbarWrap.offset().top - $adminbarHeight;
        var $current        = $(this).scrollTop();
        if ($current > $menuTop) {
          $navbar.addClass('x-navbar-fixed-top x-container-fluid max width');
          $topbar.addClass('x-topbar-fixed-top x-container-fluid max width');
          $logobar.addClass('x-logobar-fixed-top x-container-fluid max width');
        } else {
          $navbar.removeClass('x-navbar-fixed-top x-container-fluid max width');
          $topbar.removeClass('x-topbar-fixed-top x-container-fluid max width');
          $logobar.removeClass('x-logobar-fixed-top x-container-fluid max width');
        }
      });
    } else if ( $body.hasClass('x-navbar-fixed-top-active') && $body.hasClass('admin-bar') ) {
      $window.scroll(function() {
        var $adminbarHeight = $('#wpadminbar').outerHeight();
        var $menuTop        = $navbarWrap.offset().top - $adminbarHeight;
        var $current        = $(this).scrollTop();
        if ($current > $menuTop) {
          $navbar.addClass('x-navbar-fixed-top');
          $topbar.addClass('x-topbar-fixed-top');
          $logobar.addClass('x-logobar-fixed-top');
        } else {
          $navbar.removeClass('x-navbar-fixed-top');
          $topbar.removeClass('x-topbar-fixed-top');
          $logobar.removeClass('x-logobar-fixed-top');
        }
      });
    } else if ( $body.hasClass('x-boxed-layout-active') && $body.hasClass('x-navbar-fixed-top-active') ) {
      $window.scroll(function() {
        var $menuTop = $navbarWrap.offset().top;
        var $current = $(this).scrollTop();
        if ($current > $menuTop) {
          $navbar.addClass('x-navbar-fixed-top x-container-fluid max width');
          $topbar.addClass('x-topbar-fixed-top x-container-fluid max width');
          $logobar.addClass('x-logobar-fixed-top x-container-fluid max width');
        } else {
          $navbar.removeClass('x-navbar-fixed-top x-container-fluid max width');
          $topbar.removeClass('x-topbar-fixed-top x-container-fluid max width');
          $logobar.removeClass('x-logobar-fixed-top x-container-fluid max width');
        }
      });
    } else if ( $body.hasClass('x-navbar-fixed-top-active') ) {
      $window.scroll(function() {
        var $menuTop = $navbarWrap.offset().top;
        var $current = $(this).scrollTop();
        if ($current > $menuTop) {
          $navbar.addClass('x-navbar-fixed-top');
          $topbar.addClass('x-topbar-fixed-top');
          $logobar.addClass('x-logobar-fixed-top');
        } else {
          $navbar.removeClass('x-navbar-fixed-top');
          $topbar.removeClass('x-topbar-fixed-top');
          $logobar.removeClass('x-logobar-fixed-top');
        }
      });
    }
    }

   /* Now handle anchors last */
   $('html,body').animate({
      scrollTop: $('#' + location.href.split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height() - $('.x-topbar').height()
    },700 ,'swing');
});

Any thoughts?

I am also using a customised style sheet in my child theme (attached).

Thanks for your help.

[aileenfParticipant]

Oddly, on first following each anchor link, the heading gets hidden underneath the navbar/topbar area. But refreshing the page shows the heading nicely below the navbar/topbar. That makes me think that some small tweak to the javascript might resolve it but I can’t quite spot it! Thanks.

[Paul RModerator]

Hi Aileen,

Kindly change your js code to this.

jQuery(document).ready(function($) {
  $('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var topbarFixedTopHeight = $('.x-topbar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // 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 - topbarFixedTopHeight + 1
    }, ms, easing);
  }

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

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

  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchstart click', function(e) {
    $href            = $(this).attr('href');
    notComments      = $href.indexOf('#comments') === -1;
    notAccordion     = $href.indexOf('#collapse-') === -1;
    notTabbedContent = $href.indexOf('#tab-') === -1;
    if ( $href !== '#' && notComments && notAccordion && notTabbedContent ) {
      var theId = $href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight + topbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

Hope that helps

[aileenfParticipant]

Thanks for this. It fixes the anchor problem, thanks.

Unfortunately it loses my fixed topbar. If you scroll down you’ll see that the topbar disappears.

Any thoughts on how I can get that back? Thank you.

[RadModerator]

Hi there,

Another support here, and please put back your previous code, then let me know. And please provide your admin login credentials in private reply too.

Maybe your code just needs adjustment with offset’s height.

Thanks.

[aileenfParticipant]

Ah, that has fixed it, I think. I have both my original javascript and your new code in place and that seems to be okay now.

Thanks for your help,
Aileen

[ChristopherModerator]

You’re welcome.

[Author]

Posts