Mobile Scrolling down Issues

Hello @kubelyan,

I think that the easiest solution is to remove the CSS code that you mentioned above. Otherwise you have to rework it properly.

Kind Regards, Roman.

Hi Roman.

That code can’t be removed, because was added for some specific reason.
That’s why I am asking for help.
Could you please, help me out with properly reworked one?

Thanks

@kubelyan,

It looks like that requires some coding and testing.

You can hire someone for this kind of service.

Kind Regards, Roman.

@romanbon

thanks for advice. I will think about that.

Actually I was hopping to get help from Kharis Sulistiyono (@kharisblank), since the previous code has been provided by him.

Would appreciate much if he can join the thread.
Or can rephrase the title of the new thread with the same issue.

Please, let me know what the best way to address this issue to @kharisblank

thanks a lot ??

I think that it’s not necessary to create a new topic, Kharis should get an email notification since you mentioned his username. Yeah, it’s reasonable that he can be more helpful in this case ??

Kind Regards, Roman.

Hello there,

I visited your site and I found that there is no rows/sections associated to any one page scrolling menu link. This prevents me to debug the problem. Have you intentionally removed it? Would you mind putting them back?

Regards,
Kharis

hi @kharisblank

I didn’t do any adjustment to the theme, except inserting that custom css which has been mentioned above…

Hello there,

What I’m trying to inspect is your homepage sections which are built with the page builder rows. Right now your homepage is still empty. Your scrolling menu items don’t match with any row IDs.

Regards,
Kharis

Hi @kharisblank

I just added couple of rows. But I am not going to use page builder plugin anyway. My issue is that when I start scrolling down on mobile phone, and when menu bar reach out the top of the mobile screen the page content all of sudden jumping a couple of centimeters down….

Hi @kharisblank

do I need to setup menu items and rows for proper inspection of the screen jumping issue?

Note: It jumps on every page when you start scrolling.

I am sorry for the delay.

What’ll happen if you temporarily remove this extra custom CSS code:

@media only screen and (max-width: 767px){
  .site-header.float-header {
    position: fixed !important;
    top: 0 !important;
  }
  .site-header.float-header .site-logo {
    display: none;
  }
}

Regards,
Kharis

Hi @kharisblank

Just removed it…

Thank you. Do you still notice the issue on your phone? If doesn’t, I could suggest you with other alternative solution.

Regards,
Kharis

Hi @kharisblank

Since I removed fixed menu css I don’t have the issue on mobile device. But I need to have menu bar fixed on scrolling… And every time when I add the code it’s still jumping…
Please, I would like to hear more about alternative solution!

thanks

Hello there,

Please try doing the below steps:

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

jQuery(function($) {

  if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

    var headerFix = $('.site-header').offset().top;
    var vDistance = headerFix+280;

    var inserated = false
    $(window).on('load scroll', function() {
      var y = $(this).scrollTop();
      if ( y >= vDistance) {

        if(inserated == false){
          var newHead = $('#masthead').clone();
          
          (newHead).prependTo('body').addClass('masthead-clone').animate({
            top: 0
          });

          inserated = true;
          
        }    
        
      } else {
      
        $('.masthead-clone').animate({
          top: -200
        }).remove();
        inserated = false;
        
      }

    });
  
  }

});

4. Update
5. Add this CSS code to Appearance > Customize > Additional CSS:

#masthead.masthead-clone {
    position: fixed !important;
    top: -400px;
    left: 0;
}

Regards,
Kharis