I have encountered an unusual issue while working on my cafe-shop menu. Despite finding a solution in a standalone HTML file, the menu doesn't function properly when inserted into one of the pages of my WordPress theme - specifically, it only works on desktop and not on mobile devices! Surprisingly, I haven't assigned any ID or class to the tags used in the code. Additionally, all CSS styles are directly written within the HTML code instead of being linked externally.
<div style="
width: 100%;
position: sticky;
top: 0px;
text-align: center;
overflow: auto;
height: 120px;
display: flex;
z-index: 3;
background-color: white;
border-radius: 5px;
border: 2px solid #f0f0f0;
overflow-y: hidden;
justify-content: space-between;
">
<a style="
display: inline;
width: 100px;
padding: 6px 0;
font-size: 36px;
flex: 0 0 auto;
" href="#cold"><img style="height: 90px; width: auto" src="https://www.behnoosh-cafe.ir/wp-content/uploads/2022/01/burg.png" alt="category" />
</a>
... (additional similar code)
</div>To see the issue in action, visit the following link: