[braunyParticipant]

The site I am working on: http://biogennix.com/

When a user clicks on either osteoSPAN product (see details button), the page scrolls down to the relevant content area. The issue is that I want the content area to scroll to the top of the page, but as it is now…the top of the content stops under the navigation. I understand that this was probably programmed this way so the content would not be covered up by the header background, but my header background is transparent, so I need the content to scroll to the top of the browser.

Please advise.

[Rue NelModerator]

Hello There,

Thanks for writing in!

Please try to change your navbar position from Fixed Top to static top. You can do this in your customizer, Appearance > Customize > Header > Navbar Position

And please make sure that you are up to date. Our latest versions are:
X Theme: 4.0.4
Cornerstone: 1.0.3
Visual Composer: 4.5.3
Revolution slider: 4.6.93

You can find the latest version numbers here: (http://theme.co/x/member/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Thank you.

[braunyParticipant]

I set the navbar position to static top, but that did not fix the issue I am having. The scrolling down position (on click) is the same as it was before (with the fixed position).
Is there a place in the code (css) that I can change to fix this?

[ZeshanMember]

Hi Brauny,

Thanks for writing in!

You can override the current behaviour by adding following JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();

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

  $('.x-navbar .desktop a[href*="#"]').off('touchstart click');
  $('.x-navbar .desktop 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');
      }
    }
  });
});

Hope this helps. 🙂

Thank you.

[braunyParticipant]

We are almost there. I dropped in the custom JS code and now when a user clicks on the top navigation link “products” and chooses a product, the stopping position for the scrolling is correct. But…if a user chooses a product by clicking the “See Details” button under the homepage slider…the final scrolling position is not correct.

Please advise as to why one works and the other does not.

Thanks,
John

[ChristianModerator]

Hey John,

Add a class to your buttons like “scroll” and add it to the selector in the code given above.

$('.x-navbar .desktop a[href*="#"], .scroll').off
$('.x-navbar .desktop a[href*="#"], .scroll').on

Please note that the code given serves only as a guide. Further enhancement, modifications, or fixing issues arising from using the code would fall outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://theme.co/x/member/custom-development/.

Thanks.

[braunyParticipant]

Thank you…that worked.

I understand that you can’t help everyone customize the theme to their liking…I just thought that this sort of functionality should be easily adjustable within the theme. I realize now that it was not and I appreciate your help.

John

[LelyModerator]

You’re welcome John.
Thank you also for understanding.

Cheers!
X

[braunyParticipant]

Your guides (code) given to fix the scrolling worked for the product nav dropdown and links on the homepage, but the scrolling is still stopping at the wrong location when the user is on an interior page (ie. About Us) and tries to link to one of the products via the nav dropdown.

I am impressed with your theme, but it is VERY difficult to change anything (via the code) due to the way the css file is set up. I understand that this theme is probably more for the person that needs to customize through your customize panel, but going beyond that is not friendly.

I do not feel my request is something I need to commission a 3rd party to help with. It should be fairly easy to do, but I have found that it definitely is not.

Please let me know what code needs to be added to fix the scrolling issue from other pages.

Thank you.

John

[RadModerator]

Hi John,

That’s because one page navigation is simply made for single page that links to the same page’s content. And it’s not made for linking from another page to another page. You can have multiple one page navigation, but it still required to link on current page’s content.

Linking back and forth from different pages using one page navigation is not a feature that we could implement. It will kill the main purpose of “one page” as single landing page. And there is no general scroll solution since each user setup could be different (could conflict other pre-existing scrolling and on-load linking).

There are other threads that could actually help you to extend this limitation, though this setup is case to case basis and may not work for your setup :

https://community.theme.co//forums/topic/mobile-menu-issues-sticky-at-top-after-selection/#post-320627
https://theme.co/x/member/forums/topic/mobile-menu-navigation/?replyto=237158#post-237301
http://theme.co/x/member/forums/topic/page-links-using-ids/page/2/#post-98964

I’ll give you a quick snippet that you could enhance.

jQuery(function($){

  $( document ).ready ( function() {

    scroll_to_this_section ( window.location.hash == '' ? 'body' : '#'+window.location.href.split("#").slice(-1)[0], false );    

  } );

  function scroll_to_this_section ( hash, mobile ) {

    setTimeout ( function() {
          $('html, body').stop().animate({
             scrollTop: $( hash ).offset().top - ( $('.x-navbar').height() + $('#wpadminbar').height() )
          }, 850, 'easeInOutExpo');
    }, 300 );

  }

});

Again, we can’t continue providing support for customization such as this. Other thread exist as reference only, and could be use and enhance by anyone.

Thanks for understanding.

[Author]

Posts