I am currently troubleshooting an issue with the mobile version of the menu on my website. I am using php in combination with bootstrap, and for the most part, everything seems to be working correctly. However, the problem arises when trying to access the menu on mobile devices.
Initially, when the page loads and I tap on the menu, everything appears as intended. However, the issue occurs when scrolling down the page and attempting to open the menu again. At this point, the entire menu bar shifts to the right side of the screen, resulting in a distorted display. Despite this, all touch controls and hitboxes remain functional.
I am unsure of what could be causing this issue. If anyone has suggestions or solutions to rectify this problem, please let me know.
HTML and CSS:
@media only screen and (max-width: 991px){
.horizontalMenu>.horizontalMenu-list {
height: auto;
min-height: 100%;
width: 240px;
background: #cda434;
padding-bottom: 0;
margin-left: -240px;
display: block;
text-align: center;
}
.horizontalMenu>.horizontalMenu-list>li>a.active {
background-color: rgba(255, 255, 255, 0.2) !important;
color: #fff;
}
.disable-mobile{
visibility: hidden;
display: none;
}
.cover-image {
background-size: cover !important;
width: 90%;
position: relative;
}
<div class="header-main">
<header class="bg-white">
<div class="container">
<div class="row align-items-center disable-mobile">
...
</div>
</div>
</header>
<div class="mt-2 mb-4 bg-white">
<div class="horizontal-header clearfix">
...
</div>
</div>
<div class="horizontal-main bg-warning clearfix" style="background-color: #cda434 !important;">
...
</div>
</div>