Dynadot Aftermarket: discover domain gems worth investing in. Visit our aftermarket.

Responsive menu bug

SpaceshipSpaceship
SpaceshipSpaceship
SpaceshipSpaceship
Watch

maya-zir

Restricted (15-30%)
Impact
2,091
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
Close
The views expressed on this page by users and staff are their own, not those of NamePros.
GoDaddyGoDaddy
AIVikingsAIVikings

We're social

Escrow.com
Spaceship
Domain Recover
CryptoExchange.com

NamePros updates

Member card: see how many threads a member started
The member card now shows a Threads number, right after Posts. The member card is the box that opens when you point at a name. Profile...
AIVikings
Catchy
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back