Small lag on Bootstrap offscreen menu

Hey.

I want to make a offscreen navigation menu instead using native toggle menu into Bootstrap.I made It, but I have some kind of lag, when I click on menu hamburger icon, so I’m looking for way to remove this lag.
I will provide HTML, CSS, and jQuery code.

<div id="wrapper">
	<nav class="navbar" id="navbar2">
		<div class="container">
			<div class="navbar-header">
				<button id="toggleBtn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-offscreen" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle Navigation</span>
					<div id="menu-hamburger">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</div>
					<div id="navbar-close" class="hidden">
						<span class="fa fa-close"></span>
					</div>
				</button>
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="navbar-brand">
					<?php if ( get_theme_mod( 'merkoptik_logo' ) ) : ?>
						<img class="logo" src='<?php echo esc_url( get_theme_mod( 'merkoptik_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'>
					<?php else : ?>
						<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
					<?php endif; ?>
				</a>				
			</div>
			<div id="navbar-offscreen" class="collapse navbar-collapse">
				<?php wp_nav_menu( array(
					'menu' 			=> 'Primary',
					'theme_location' => 'primary',
					'menu_class' => 'nav navbar-nav navbar-right navbar-wp'
				)); ?>
			</div>
		</div>
	</nav>
</div>

.navbar {
	min-height: 90px;
}
.navbar-brand {
	img {
		width: 100px;
	}
}
.navbar-nav {
	margin-top: 25px;
	padding-top: 0px;
}
#navbar2 .navbar-header {
    float: none;
}
#navbar2 .navbar-nav {
    float: none !important;
    margin: 55px 0px;
}
#navbar2 .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}
#navbar2 .navbar-form {
    float: none !important;
    padding: 0;
}
#navbar2 .navbar-nav>li {
    float: none;
    a {
    	color: #fff;
    }
}
#wrapper {
    position: relative;
    right: 0;
    transition: right 0.25s ease;
}
#navbar2 .navbar-collapse {
    position: fixed;
    top: 0;
    right: -70%;
    display: block;
    width: 70%;
    height: 100% !important;
    margin: 0;
    background-color: #000;
    transition: right 0.25s ease;
    z-index: 999;
    text-align: right;
}
#navbar2 .navbar-collapse.collapsing {
    transition: right 0.25s ease;
}
#navbar2 .navbar-collapse.in {
    right: 0;
    background: #000;
}
body.menu-slider.in {
    overflow: hidden;
}
body.menu-slider #wrapper {
    transition: right 0.25s ease;
}
body.menu-slider.in #wrapper {
    right: 70%;
}

(function ($) {

    'use strict';

    $('#navbar-offscreen')
    .on('show.bs.collapse', function (e) {
        $('body').addClass('menu-slider');
    })
    .on('shown.bs.collapse', function (e) {
        $('body').addClass('in');
    })
    .on('hide.bs.collapse', function (e) {
        $('body').removeClass('menu-slider');
    })
    .on('hidden.bs.collapse', function (e) {
        $('body').removeClass('in');
    });
    // Change hamburger to close icon
    $('#toggleBtn').click(function() {
        $('#menu-hamburger').toggleClass('hidden');
        $('#navbar-close').toggleClass('hidden');  
    });
})(jQuery);

Any idea ? Thanks

Can you provide clean html without php (html from view source once the page is running) and in that way we can build a working example to test the menu. Also clean CSS and not less/sass please :wink:

Or better still put your code into a codepen so we can test without having to build it for ourselves :slight_smile:

2 Likes

Sorry, my fault.

Here is pure HTML, with non-compiled CSS.

http://www.bootply.com/ryEdShMsvH

This offscreen navigation display only on mobile screens, so you don’t have to pay attention on larger screens.

Thanks.

This may be a bit of a hack but I think bootstrap is transitioning the menu downwards first before your sideways menu is allowed to move.

How about you bypass it and do it like this.

CSS:

#navbar2 .menuon{
	right: 0;
	background: #000;
}

Script:

(function ($) {
    'use strict';

    $('body').on('click', '#toggleBtn', function (e) {
        $('#navbar-offscreen').toggleClass('menuon');
    })
})(jQuery);

Those additions make it work for me straight away but not sure if it breaks anything else.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.