Dynadot .com transfer sale, only $10.12 with coupon code DYNA12, available while supplies last, ends October 31, 2026.

Responsive menu bug

SpaceshipSpaceship
SpaceshipSpaceship
SpaceshipSpaceship
Watch

maya-zir

Restricted (15-30%)
Impact
2,079
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.
GoDaddyGoDaddy
CatchedCatched

We're social

Escrow.com
Spaceship
Escrowly
CryptoExchange.com
Domain Recover

NamePros updates

New in Parking: updated way to act on many domains or inquiries at once
Your domain list and inquiry list now have a bar above and below the list. Check the items you want, then choose an action in the bar...
AIVikings
Catchy
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back