Menu not responding to #x-section links

Hi there. Please, tell me why the links of 3 out of 5 links in the menu at http://nblund.com/mindtreat do not respond. Thanks.

Hi There,

Thank you for writing in, did you just guess your section IDs? You only got the #x-section-2 right, the others are wrong. Please add your own ID to your section instead and use that ID to link it on your menu. Don’t rely to the ID that the section generated because those can be change when you re-order them.

Hope it helps,
Cheers!

Hi there. I fully understand the issue with replacing sections. However, it doesn’t work no matter if I assign an ID to the section; or refer to the section by number (#x-section-3 for example); or simple enter the section id directly in the browser. I also can’t see that the others wrong, as you say. Are you sure, you mean that - and in that case, please elaborate. Thanks.

Hi there,

Could explain the issue a bit more? :slight_smile:

Your page isn’t setup for one-page navigation to work like that, plus you’re linking from and to other pages instead of linking on the same page (hence one-page means links within page).

But it sounds that you’re expecting it to animate and scroll to the section when you enter the URL and ID directly in the browser. There is no such feature, plus when you do that, it’s the browser that makes it jump to the target section, it’s default in all browsers.

You may want to implement something like this in your global custom javascript to have that feature that you’re looking.

jQuery(function($){

function scroll_it_to ( id ) {

var hash_id = window.location.hash;

console.log( hash_id );

if ( hash_id !== "" ) { 
  
    $('html,body').stop().animate({
      scrollTop: $( hash_id ).offset().top - 112
    },700 ,'swing');

}

}
  


$(document).ready( scroll_it_to );
$(window).load( scroll_it_to )

});

But it’s not gonna work because your site has its own scrolling feature. I can’t even scroll it by mouse. Then there are other existing codes that doing the same thing (scrolling). I think it’s best to consult this to a developer for further and deeper checking. This is not theme feature, but browsers plus from your existing custom codes.

I also suggest disabling the ConvertPlug plugin, or update it. It’s causing layout issue that removes scrollbars.

Thanks!

Hi again.

With regards to the one-page menu, I have deleted the whole thing. FYI, it didn’t work as expected even with the one-page menu configuration. Anyway:

You say my site has its own scrolling feature. Are you referring to the Smooth Scroll plugin that is bundled with the theme? Apart from this, I wouldn’t know what you are referring to?

Then you also suggest disabling the ConvertPlug plugin, or update it - because It’s causing layout issue that removes scrollbars. Again, the ConvertPlug plugin is part of the bundle so I suppose that you can support me using it? Or? FYI, the ConvertPlug was already updated, so not sure exactly what you are referring to here? And I am not sure which scrollbar issues you are referring to? Please elaborate.

I did notice the same as you - that I can’t even scroll by mouse sometimes. What is causing this?

Thanks.

Hi there,

As said, it will not work. And even if you enable one-page navigation, it will still not work. Since your menu isn’t configured for one-page navigation, that’s because of you menu links are absolute (linking in and out the page).

Plus, what you’re trying to achieve is not related to one page at all, you wanted to make it scroll to the section when the page loads.

Please update your ConvertPlus first, it’s the first step before we can continue. It’s the one that’s causing the scrolling and layout issue. And yes, please disable smooth scrolling too, since that scrolling is done by javascript, then it’s greatly affected by another javascript. I’m not saying I’ll stop here, but we need to narrow it down one by one. And yes, you have existing custom javascript that do the same scrolling function, you may remove it as well if it’s not related or not in use at all.

Thanks!

Hi there.

1
Sorry, but you have asked me to update the ConvertPlug plugin twice now. As I said in the previous message: ConvertPlug IS ALREADY updated. Now, if there is a newer version this does not show in wordpress - wordpress does not show an option to update the plugin. So, if you still want me to update this plugin, you will have to elaborate what you see that I don’t see. Please?

2
The javascript you are referring to may be this:

2.1
jQuery(window).scroll(function () {
jQuery(“body”).css(“background-position”,"50% " + (jQuery(this).scrollTop() / 2) + “px”);
});

OR the following which is inspired by this ticket: https://theme.co/apex/forum/t/onepage-nav-scrollto-not-working/7265/4.

2.2
//
// Avoid top of section (headline) hidden underneath the header
//

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.hm1').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);
  }


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

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

  //
  // Scroll trigger.
  //

  $('a[href*="#"]').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, 'easeInOutExpo');
  }
}
  });
});

2.3
I have deleted the cf 2.1, but please let me know which code you were referring to?

3
It was a surprise to me that I cannot do the one-page scroll to a section navigation. There are quite a few support tickets related to this in your support forum? But, as I said, I have deleted the menu and hence, no such feature on the //mindtreat page any longer.

Thanks.

Hi there,

Any of that code provided in the forum is not part of the theme, it’s rather a custom code which may only apply to each specific case or site. We provide some custom code as a snippet, user are free to enhance them but we can’t always provide support on each custom code, we don’t really provide custom codes especially when it’s complex.

Yes, you said it was updated but it doesn’t reflect on my end which could be cache related, it’s okay now. Updating ConvertPlug is not a fix for your main issue, I’m simply saying that it’s affecting the layout and scrolling feature and I can’t do troubleshooting because of that.We just need to stop for that moment to fix that side issue so it will not hinder our troubleshooting. And because of that, I’m now able to scroll your site with mouse and the layout is now correct.

About the javascript that I’m referring, I mean all custom javascript that you can find. It’s just my assumption since there could be many possible causes, including the outdated ConvertPlug. So it appears to be that the cause is ConvertPlug’s javascript.

Yes, you can’t really do the one-page scroll to a section from a navigation, because your menu linking is not really applicable for one-page navigation. Example, instead of like this http://nblund.com/work/#ventures, it should be like this #ventures. One page navigation only works when linking to the section of the current page, it’s not gonna work when you’re linking from home page to the section of another page (it’s not one-page anymore). Plus, as addition, you’re on Pro header in which one-page is not yet fully supported.

Though I think, since ConvertPlug is okay now, I’m able to test the javascript now. What you need is to add this to your global custom javascript

jQuery(function($){

function scroll_it_to ( id ) {

var hash_id = window.location.hash;

console.log( hash_id );

if ( hash_id !== "" ) { 
  
    $('html,body').stop().animate({
      scrollTop: $( hash_id ).offset().top - 112
    },700 ,'swing');

}

}
  


$(document).ready( scroll_it_to );
$(window).load( scroll_it_to )

});

This should scroll your page upon load to the target section.

Thanks!