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