IT.COM

Responsive menu bug

Spaceship Spaceship
Watch

maya-zir

Top Member
Impact
1,883
I need help :(
Check this site from the desktop, but reduce the browser until the tablet or phone mode.

The website: https://bestdubaitours.com/

Issue #1:
The responsive menu icon appears not to get CSS style for the first few seconds and appears below the main menu area.


Issue #2:
The mobile menu icon appears in the correct place only if I am not logged in.
It means, you all can see it correctly, but I am, as admin, no.
When I am logged in, the icon goes up to the wp-admin top bar.


Issue #3:
When I click on the menu icon, the menu area is jumping, I have no idea how to explain it, but you can try and see.
I gave CSS style to the open area and I see it getting and losing style and don't understand when exactly it happens.


This is the CSS:
.mobile-menu-toggle .icon {
cursor: pointer;
}

.mobile-menu-toggle {
display: none;
text-align: center;
}

.mobile-menu {
display: none;
}

@media screen and (max-width: 750px) {

#jquerycssmenu, .jquerycssmenu {
display: none !important;
}

.mobile-menu-toggle {
position: absolute;
top: 3px;
right: 0px;
margin: 1rem;
z-index: 99999;
color: #9E0505;
}

.mobile-menu-toggle.active + .mobile-menu {
display: block;
text-align: center;
color: #636363;
background-color: #C7C7C7;
}

.mobile-menu-toggle.active + .mobile-menu li {
padding: 5px;
border: 1px solid #E1E1E1;
}
}

mobile-menu-toggle.php
<div class="mobile-menu-toggle">
<span class="icon">
<i class="fa fa-bars"></i>
</span>
<span class="menu-label">Menu</span>
</div>
<div class="mobile-menu">
<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => false ) ); ?>
</div>

<script>
jQuery(document).ready(function($) {
$('.mobile-menu-toggle').click(function(){
$(this).toggleClass('active');
$('.mobile-menu').slideToggle();
});
function toggleMenu() {
if($(window).width() <= 750) {
$('.mobile-menu-toggle').show();
$('.main-navigation').hide();
} else {
$('.mobile-menu-toggle').hide();
$('.main-navigation').show();
$('.mobile-menu').hide();
$('.mobile-menu-toggle').removeClass('active');
}
}
toggleMenu();
$(window).resize(function(){
toggleMenu();
});
});
</script>
 
Last edited:
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back