Mobile Manu Scroll

[lionelfranco]

The mobile menu does not “smooth scroll” when it is initially opened. Only after I open one of the accordion menu items does it begin to “smooth scroll” the entire menu. I hope that makes sense. I sure I am missing something or something can be adjusted.

Thanks for you help

---

Template Version: 8.0.0

[Support]

Hello,

Sorry but i’m little confused with your question. Also, I couldn’t reproduce the issue in your website.

Please send us more details about that question.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[lionelfranco]

This reply has been marked as private.

[Support]

Hello,

Thanks for the video!

Please try adding the code below in (css/custom.css):

html, body{
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[lionelfranco]

I added the code to the custom.css file cleared my phones browser cache and tried again. I didn’t see any change. I also tested other mobile browser to see if it was just Safari. I tried Microsoft Edge mobile browser as well as Chrome mobile browser and the result is the same no matter what browser I use.

---

[Support]

Hello,

Sorry the delay to reply (the response delay can increase on weekends).

I did some tests and seems to be an iphone/ios issue. Please try the next two options below:

1) Add this code in (css/custom.css):

.scrollable, .scrollable-content {
    -webkit-overflow-scrolling: touch;
}

Test again. If still not works, please try the workaround below (option 2):

2) Add the code below in (js/custom.js):

$(window).on('load', function(){
	if( $('html').hasClass('iphone') || $('html').hasClass('ios') ) {
		$('.header-nav-main a[href="#collapse1-1"]').trigger('click');
		setTimeout(function(){
			$('.header-nav-main a[href="#collapse1-1"]').trigger('click');
		}, 500);
	}
});

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[lionelfranco]

This reply has been marked as private.

[Support]

Hello, thanks for the new video!

We understood the issue. The problem is that we couldn’t reproduce the issue in our real devices. Also we did tests using BrowserStack (https://www.browserstack.com/), that uses real devices but also unfortunately we couldn’t reproduce the issue. Seems to be a very specific issue in your iphone. But do not worry we are here to help.

My suggestion now is try to emulate the click on accordion after menu opens. In the videos you mentioned that when click to open the accordion the smooth scroll works. We can try reproduce that “click” with JS events.

For it please try adding the code below in (js/custom.js):

$('.hamburguer-btn').on('click', function(){
    setTimeout(function(){
        $('.header-nav-main a[href="#collapse1-1"]').trigger('click');
        $('.side-header-scrollable').trigger('click');
        $('.scrollable-content').trigger('click');
        $('.header-nav').trigger('click');

        setTimeout(function(){
            $('.header-nav-main a[href="#collapse1-1"]').trigger('click');
        }, 500);
    }, 1000);
});

* Make sure to clear the cache on browsers.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[lionelfranco]

This reply has been marked as private.

[Support]

Hello,

Yes unfortunately this is very weird issue.

I entered in your website links index-test.html and feature-navigations-hamburguer-overlay.html and saw that you don’t added the JS code I mentioned in my last reply. Did you tried the JS code below ?

$('.hamburguer-btn').on('click', function(){
    setTimeout(function(){
        $('.header-nav-main a[href="#collapse1-1"]').trigger('click');
        $('.side-header-scrollable').trigger('click');
        $('.scrollable-content').trigger('click');
        $('.header-nav').trigger('click');

        setTimeout(function(){
            $('.header-nav-main a[href="#collapse1-1"]').trigger('click');
        }, 500);
    }, 1000);
});

Regarding “Is there also a way to stop the main page on the background from scrolling on desktop an mobile”, you mean when the sidebar/menu stay opened ? If this is the case you need the code below in (css/custom.css):

html.side-header-hide, html.side-header-hide body {
  overflow: hidden;
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[lionelfranco]

I went back to the drawing board and got it working. You can see it in action here https://sill-www.army.mil/index.html I ended up simplifying it by removing the following:

<div class=”header-column flex-row flex-lg-column justify-content-center h-100″>
<div class=”header-container container-fluid d-flex h-100″>
<div class=”header-row header-row-side-header flex-row h-100 pb-5″>
<div class=”side-header-scrollable scrollable colored-slider h-100″ data-plugin-scrollable>
<div class=”scrollable-content”>
<div class=”header-nav header-nav-light-text header-nav-links header-nav-links-side-header header-nav-links-vertical header-nav-links-vertical-expand header-nav-click-to-open align-self-start”>
<div class=”header-nav-main header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-4 header-nav-main-sub-effect-1″>

Thanks again for all of your help and support

---

[Support]

Hello,

Great that you figured this out!

If you need any further help feel free to contact us.

Kind Regards,

Rodrigo.

---

[Author]

Posts