Accordion Moving Entire Page Down on Mobile

[ryanschaefer41]

Hi,

Whenever the accordion is hit (mobile + desktop), it moves the entire page content down. I’d like to have the accordion just open over the page without moving the content down.

I’ve tried a few different solutions, but nothing has worked. Here’s the JS fix:

jQuery( function ( $ ) {

$(document).on('click', '.x-accordion-toggle', function( e ){
$('html, body').stop();
});

});

I’ve also tried this,which was a CSS suggestion:

.x-navbar.x-navbar-fixed-top {
    position: fixed;
}

/*nav bar stays on top*/
.x-navbar.mobile.x-nav {
    margin: 0px 0 !important;

A couple times, the accordion has expanded over the page itself without actually moving the content down, but that was after I had already expanded and collapsed it and scrolled down. It wouldn’t work immediately on loading the page. (However, it’s not doing this anymore and pushes the content down every time now.)

None of these are working, so any help is appreciated. Thanks!

[nabeel]

Hi there,

Thanks for writing around! I tried to check your site but the given credentials are not working on my end. Please double check the username and password to see if they are correct.

In the mean time please try adding the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery( function($) {
	$('.x-accordion-heading a').on('click', function( e ){
		setTimeout( function() { 
			$('html, body').stop().stop();
		}, 100 );
	});
	$(document).ready(function() {
		$('.x-accordion-heading a').off('click touchstart touchend');
	});

});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[ryanschaefer41]

That didn’t seem to work unfortunately. Username edited in the secure note.

[paul.r]

Hi,

Can you provide us the exact url of the page where we can see the issue.

I tried creating a test page and added an accordion but could not replicate the issue of scrolling down.

Thanks

[ryanschaefer41]

Hi—I just removed the “Under Construction” page, so it’s http://ryanjschaefer.com. All the body content moves down when the hamburger is clicked. I’d like it to just overlay on top of the content.

Thanks!

[jade]

Hi there,

Please add this code in the custom CSS:

@media (max-width: 979px) {
    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: 60px !important;
    }
}

Hope this helps.

[ryanschaefer41]

Works perfectly—thanks!

[jade]

Glad to hear that.

Cheers!