I'm facing an issue where the CSS property overflow-x: hidden is not working on mobile devices.
Here is a snippet of my HTML code:
<div class="topbar">
<div class="navbar-brand float-left">
<a href="#"><img src="assets/img/logo.png"></a>
</div>
<div class="float-right mr-4 menu-bar">
<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
</div>
<div class="dropdown-btn">
<div class="menu_btn" onclick="event.stopPropagation(); myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-content">
<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
</div>
</div>
<div class="menu-img"><img src="assets/img/menu-img.png"></div>
</div>
Here's a snippet of my CSS:
.topbar {
width: 100%;
background-color: black;
color: white;
margin: 0px;
padding: 3rem;
position: relative;
}
a {
text-decoration: none;
}
/* Other CSS styles... */
I've tried using overflow-x: hidden on body and html, but it didn't work as expected. When I applied it directly to topbar, it worked but caused the dropdown menu to disappear. I'm looking for a solution to hide overflow on the image but still show the dropdown menu.