[uberphotoParticipant]

Hi Themeco peoples,

I was trucking along fine and then decided to fix my mobile menu and then make it thinner. The end result of this is something that looks pretty slick on mobile, but because my menu (note: I’ve disabled the standard mobile menu) was 68px on desktop, and is height:50px on mobile, I get an 8px gap on in-page scrolls on mobile. Desktop is fine.

Is there a bit of JS that can solve this offset issue on 767px and below?

Thanks!

Bobby

[uberphotoParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

Would you mind providing a screen recording or screenshot of the issue you’re getting? I don’t think it’s related to one page, but I don’t see any issue with scrolling either.

Thanks!

[uberphotoParticipant]

The issue is only on mobile and is consistent across all pages.

The screens will hopefully show you what I mean, the first and last being of a scroll link and 60px sticky header area on desktop working seamlessly — thanks again for your help on that, by the way.

The other two show the same scroll link to the same section in mobile and the gap that is left over between the next section and the now 50px high sticky header. I’m hoping to get rid of that gap on mobile without raising the mobile header to 60px or unsticking it.

Does that help?

[Rue NelModerator]

Hello There,

To resolve this, you may add a gap element with a specific height to compensate the gap that is left over between the next section. You can apply a visibility option for the gap element so that it will only be visible on smaller screens.

Hope this would help.

[uberphotoParticipant]

Sorry, but I’m not sure how adding more space is going to help me take away a gap on mobile? I did give it a shot, and I tried playing with padding and margins before I even made this post, but, unless I’m missing something obvious (which is entirely possible), it doesn’t work. A bit of JS that doctors the scroll offset on mobile seems the most likely, to me — or am I way off base?

If it helps, this is the JS I’ve gotten from other conversations with you guys so far:

jQuery ( function($) {

function re_render_IE() {
setTimeout ( function(){ $(window).trigger('scroll'); }, 100 );
}

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

} );

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');

    if (scrollPos > 100) {
      navbar.addClass('home-navbar-onscroll');
    } else {
      navbar.removeClass('home-navbar-onscroll');
    }
  });
});

var $ = jQuery.noConflict();
$(function(){
    $(window).scroll(function() {              
        ($(document).scrollTop() + $(window).height()) / $(document).height() > 0.98 ? $('footer').fadeIn() : $('footer').fadeOut();
    });
})

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

   $('.section-expandable').slideToggle(0);
    $('.section-trigger').on('touchend click',function(e){
       e.preventDefault();
       $('.section-expandable').slideToggle('slow')
       $('html, body').animate({
           scrollTop: $(".section-expandable").offset().top-60
       }, 700, 'swing');
 
    });
});

[RadModerator]

Hi there,

Removing the height on this CSS should fix it,

  .x-navbar.x-navbar-fixed-top.home-navbar-onscroll {
    height: 50px;
    background-color: #2d2727 !important;
    background-image: url('http://uberphoto.ca/wp-content/uploads/2016/06/mobilelogo-1.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }

Thanks!

[uberphotoParticipant]

Thanks Rad — but I actually -want- the mobile navbar to be 50px and the desktop one to be 60. If I remove that, it doesn’t solve my problem, it creates one. I did try it, though, just to be sure. All I’m looking for is a way to alter the offset on mobile when scrolling to a section. Or even roll it back a bit after the fact, if that’s easier.

[Paul RModerator]

Hi,

Please change your JS Code to this.

jQuery ( function($) {

function re_render_IE() {
setTimeout ( function(){ $(window).trigger('scroll'); }, 100 );
}

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

} );

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');

    if (scrollPos > 100) {
      navbar.addClass('home-navbar-onscroll');
    } else {
      navbar.removeClass('home-navbar-onscroll');
    }
  });
});

var $ = jQuery.noConflict();
$(function(){
    $(window).scroll(function() {              
        ($(document).scrollTop() + $(window).height()) / $(document).height() > 0.98 ? $('footer').fadeIn() : $('footer').fadeOut();
    });
})

jQuery(document).ready(function($){
    var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
   $('.section-expandable').slideToggle(0);
    $('.section-trigger').on('touchend click',function(e){
       e.preventDefault();
       $('.section-expandable').slideToggle('slow')
       $('html, body').animate({
           scrollTop: $(".section-expandable").offset().top - navbarFixedTopHeight
       }, 700, 'swing');
 
    });
});

Hope that helps.

[uberphotoParticipant]

Thanks Paul — unfortunately, it did not work when the mobile menu is 50px, though. The slide toggle works (the hidden section link), and always has, but the regular scroll to section buttons leave at least a 10px gap.

[RadModerator]

Hi there,

Do you have other custom scripts? I checked and deleted elements including navbar and still the same. Hence, it’s independent to what X has now.

Would you mind providing your admin login credentials too?

Thanks!

[uberphotoParticipant]

Nothing else going on, that I can tell.

Credentials below.

[uberphotoParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I updated your javascript code to this,

jQuery ( function($) {

function re_render_IE() {
setTimeout ( function(){ $(window).trigger('scroll'); }, 100 );
}

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

} );

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');

    if (scrollPos > 100) {
      navbar.addClass('home-navbar-onscroll');
    } else {
      navbar.removeClass('home-navbar-onscroll');
    }
  });
});

jQuery(function( $ ){
    
    $(window).scroll(function() {              
        ($(document).scrollTop() + $(window).height()) / $(document).height() > 0.98 ? $('footer').fadeIn() : $('footer').fadeOut();
    });

})

jQuery(document).ready(function($){
    var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
   $('.section-expandable').slideToggle(0);
    $('.section-trigger').on('touchend click',function(e){
       e.preventDefault();
       $('.section-expandable').slideToggle('slow')
       $('html, body').animate({
           scrollTop: $(".section-expandable").offset().top - navbarFixedTopHeight
       }, 700, 'swing');
 
    });
});

jQuery(function( $ ){
    
    $('.scroll_to').off('click touchend touchstart').on('click', function(e) {

      var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();

      e.preventDefault();
      e.stopPropagation();

       $('html, body').animate({
           scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top - navbarFixedTopHeight
       }, 700, 'swing');

    } );

})

Then please add scroll_to to your arrow element’s class.

<a href="#create-memories" class="scroll_to">[x_icon type="angle-down"]</a>

Cheers!

[uberphotoParticipant]

Thanks Rad — still no dice, though. I managed to get the home page working, well enough, by tweaking the link to scroll to the row or column ID on mobile (the scroll-to class did nothing, either way), but I can’t get that to work on the inner pages.

Specifically, on mobile scroll-to buttons on pages with a gallery like /family-pet-photography/ (orange grid icon button in first section on mobile), it does not work. I’ve tried scroll-to class, targeting the ID of the section, the row, the column, the gallery, and even the gallery’s UL ID, as well as playing with margins and padding and that continues to befuddle. 60px header on mobile works fine — 50px continues to leave a gap here.

I am fast losing what is left of my hair… 😛

[Author]

Posts