[kgpthemexParticipant]

Hi!

I’m having issue with a certain configuration. I adopted a customization from another thread which serves the purpose very well with the exception of a couple of issues.

Current configuration:
-singe page layout
-transparent header above revolution slider
-non-transparent sticky header past/below revolution slider

When you click on a navigation link, the page moves down and a new, non-transparent sticky header shows up. It works great in desktop view however not exactly how it should on mobile or small screens. There are two issues:

1) When the appropriate navigation link is clicked, the page scrolls down to the particular section but not enough for the non-transparent sticky header to pop up. It only shows up if you scroll a bit further down.
2) When a nav link is clicked, the mobile navigation menu stays open when the non-transparent sticky header finally shows up. It should stay collapsed.

I have tried to set the anchor tag to the row and to the section but these attempts did not fix it.

Any help will be appreciated!

Thank you!

[kgpthemexParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

1. I need to know what you would like to happen.

2. To make it close, you can add this in Custom js

jQuery(function($) {
    $('.x-nav-wrap.mobile a').on('click',function() {
          $('.x-btn-navbar').click();
          $('.home .x-navbar').addClass("x-navbar-solid");
   });
});

Thanks

[kgpthemexParticipant]

Thank you so much!

So the mobile nav does close now.

The other thing I would like to happen is when you click on “Benefits” link, it scrolls down to the section but the non-transparent header does not show up until you scroll a bit more down.

How can I make sure that when a user clicks on the “Benefits” link, the non-transparent header shows up in desktop and mobile without having to scroll a bit more down.

Thanks again!

[Paul RModerator]

Hi,

To fix that, you can add this in Cornerstone > Settings > Custom JS

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchend click')
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .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  + 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) {
    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');
      }
    }
  });
});

Hope that helps.

[kgpthemexParticipant]

Hey Paul,

Thank you for that. I didn’t know the fix required such an elaborate script. I appreciate your effort. While this works flawlessly on the desktop version, it doesn’t work on the mobile side.

In fact, the other fix you helped me with, making the mobile menu collapse, no longer works as well.

I have kept the new script in place so you can see how it functions on the mobile side.

I really appreciate the support you are providing!

Thanks again

[RadModerator]

Hi there,

Please move this code after that new one

jQuery(function($) {
    $('.x-nav-wrap.mobile a').on('click',function() {
          $('.x-btn-navbar').click();
          $('.home .x-navbar').addClass("x-navbar-solid");
   });
});

Correct order should be implemented since this line $('a[href*="#"]').off('touchend click') disable any touch/click even that’s registered before it.

Thanks!

[kgpthemexParticipant]

Excellent Paul!

It’s nearly exactly what I want!

If you could just help me to get it just right, that would be great:

1) Currently, when the page scrolls down, the activated header, slightly covers the section. How can I retain the current functionality while ensuring that the header slides in above the anchored section so it doesn’t cover as much content.
2) What would I need to adjust in the code if I needed to move the anchor? I tried moving the anchor tag to another section but the sliding down header does not behave in the same manner.
3) The mobile nav closes as it should after the scroll, however, once you have scrolled to a particular area, and you click the mobile menu again to open it, it shoots you right back up to the top. How can I prevent this please?

Thanks again for your tremendous help!

[RadModerator]

Hi there,

1. From the code above, find this line

scrollTop: $(element).offset().top - adminbarHeight + 1

Then add or subtract some value until you find the correct positioning

Example:

scrollTop: ( $(element).offset().top - adminbarHeight + 1 ) - $(window).width() <= 767 ? 20 : 0

Just change the 20 value.

2. Just as provided in #1

3. It went haywire on my end, sometimes it appears sometimes it isn’t. And sometimes it doesn’t scroll along. Maybe it needs different customization. Please backup your site and I’ll reset the custom code back and I’ll see if I can implement a different code.

And please check this https://community.theme.co/forums/topic/welcome-to-the-general-forum-please-read-this-first/, let’s continue our discussion there (https://community.theme.co/support/) and link this thread.

Thanks!

[kgpthemexParticipant]

Thank you so much Rad!

Just absolutely invaluable information. If you could do that, I would highly appreciate it.

Per your instructions, I have indeed created a ticket and linked this discussion in there.

I look forward to seeing the next fix!

[ChristopherModerator]

Thank you, we’ll help you with this on the other thread.

[Author]

Posts