I have a menu that I would like to toggle hide/show by adjusting its top position.
Before logging in, the menu is structured as follows:
<div class="lc">
<h1><a href="./"><img src="logo.png" /></a></h1>
<a href="#" id="menuBtn"></a>
<nav id="mainNav">
<ul>
<li><a href="....php">...</a></li>
<li class="nav-li-..."><a href="....php">...</a></li>
</ul>
</nav>
</div>
After logging in, additional items are added:
<div class="lc">
<h1><a href="./"><img src="logo.png" /></a></h1>
<a href="#" id="menuBtn"></a>
<nav id="mainNav">
<ul>
<li><a href="....php">...</a></li>
<li class="nav-li-..."><a href="....php">...</a></li>
<li class="nav-li-..."><a href="....php">...</a></li>
<li class="nav-li-..."><a href="....php">...</a></li>
<li class="nav-li-..."><a href="....php">...</a></li>
<li class="nav-li-..."><a href="....php">...</a></li>
</ul>
<div class="nav-admin">
<strong>Administrator links:</strong><br />
<a href="....php?users">...</a><br />
<a href="....php?user_logs">...</a><br />
<a href="....php?dealer_logs">...</a><br />
<a href="....php?herd_logs">...</a><br />
<a href="....php?php_logs">...</a>
</div>
</nav>
</div>
This CSS code defines the styling:
.lc, nav, h1 {
background: #fdf6bf;
background: #FDD;
}
.lc {
position: fixed;
z-index: 200;
width: 14em;
height: 100%;
top: 0;
left: 0;
padding-top: .5em;
overflow: auto;
}
h1 {
width: 100%;
font-size: 1em;
margin-top: 0;
margin-bottom: .5em;
}
h1 a {
display: block;
width: 100%;
text-align: center;
}
h1 a img { max-width: 70%; }
nav ul { list-style: none; }
nav ul li { padding: .75em 0 .75em 4.25em; }
nav ul li.is-active { background: #fdf9dc; }
nav ul li.is-active a:after {
content: "\232A";
position: absolute;
right: .25em;
top: -.05em;
font-size: 3em;
height: 1em;
line-height: 1em;
vertical-align: middle;
color: #c9c49d;
}
nav ul a,
.btn-add {
display: block;
position: relative;
height: 3em;
padding-left: 1em;
line-height: 3em;
vertical-align: middle;
font-family: 'Exo', sans-serif;
text-decoration: none;
color: #4f4e4c;
font-size: 1em;
font-weight: 600;
}
nav ul a:before,
.btn-add:before {
content: '';
position: absolute;
right: 100%;
top: 50%;
margin-top: -1.75em;
width: 3.5em;
height: 3.5em;
background: url(images/menu_home.png) center center no-repeat;
background-size: cover;
}
.nav-show { top: 0; }
.no-scroll { overflow: hidden; }
@media screen and (max-width: 550px) {
* { font-size: 1em; }
nav {
position: fixed;
z-index: 180;
top: -100%;
left: 0;
padding-top: 4.5em;
width: 100%;
height: 100%;
overflow: auto;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background: #fffad5;
}
nav ul li.is-active { background: #fffcea; }
.lc {
position: fixed;
width: 100%;
height: 3.5em;
overflow: hidden;
}
To toggle the menu, I am using the following script:
$(function() {
$('#menuBtn').on('click', function(e) {
$('body').toggleClass('no-scroll');
$('#mainNav').toggleClass('nav-show');
e.preventDefault();
});
});
The issue I am facing is with opening the menu after logging in. While it works on desktop PCs, mobile phones (Android) seem to have trouble displaying the menu. I have tested various phones and browsers, but the problem persists consistently on mobile devices.
If anyone has any insights or solutions, please share!