maya-zir
Restricted (15-30%)
- Impact
- 1,910
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.php
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: