Dropdown navigation doesn't work on mobile devices (JavaScript, HTML, CSS)

Question

I built a navigation using JS and SCSS. On desktop it works totally fine, also some mobile devices like Galaxy S10 show the dropdown menu. But most other mobile devices do nothing when I click the nav elements.

That's my JS code:

document.writeln(
  ` <ul>
<li><a href="../index.html">Start</a></li>
<li>Menu point 1<i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-right" aria-hidden="true"></i>  
  <ul class="dropdown">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</li>
<li>Menu point 2<i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-right" aria-hidden="true"></i>
    <ul class="dropdown">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </li>
</ul>`
);

CSS:

nav {
    z-index: 10;
    font-weight: bold;
    text-transform: uppercase;
    color: $color-dark;
    text-decoration: none;

    a {
      &:hover {
        color: $color-accent-dark;
      }
    }

      
      ul {
        list-style: none;
        margin: 0;
        padding-left: 0;

      }
      
      li {
        display: block;
        float: left;
        padding: 1rem;
        position: relative;
        text-decoration: none;
        transition-duration: 0.5s;
        min-width: 90px;

        .fa-caret-right {
          display: none;
        }
      }

        
      li:hover,
      li:focus-within {
        cursor: pointer;
        color: $color-accent-dark;


        .fa-caret-down {
          display: none;
        }

        .fa-caret-right {
          display: inline;
        }

      }
      
      li:focus-within a {
        outline: none;
      }

      ul li:last-child {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
      }
      
      ul li ul {
        visibility: hidden;
        opacity: 0;
        min-width: 5rem;
        position: absolute;
        transition: all 0.5s ease;
        margin-top: 1rem;
        left: 0;
        display: none;
      }
      
      ul li:hover > ul,
      ul li:focus-within > ul,
      ul li ul:hover,
      ul li ul:focus {
         visibility: visible;
         opacity: 1;
         display: block;
         z-index: 15;
      }
      
      ul li ul li {
        background-color: $color-light;
        clear: both;
        width: 100%;
      }

}

I expected it to be clickable on mobile devices too but I can't find a solution on that. Do you have any ideas? Do I miss something here?

it might be better to toggle your dropdown state by attaching a javascript click event that toggles a CSS class to show/hide the menu instead of relying on just CSS styling of :hover and :focus-within to toggle the state. — zgood
– zgood, Commented Aug 21, 2024 at 18:16

Wakil Ahmed · Accepted Answer · 2024-08-21 19:26:15Z

0

document.writeln() is not recommended to use anymore, as mentioned at mozilla developer network (MDN) https://developer.mozilla.org/en-US/docs/Web/API/Document/writeln

Also, it is ideal to use some javascript to control the visible or hidden state of the menu along with css, than doing it only using css. The way hover and focus work on desktop, may not always work exactly the same way in all touchscreen devices. Thus, it would be very difficult to guarantee the intended behaviour on all touch devices, using the hover and focus-within css selectors.

answered Aug 21, 2024 at 19:26

Wakil Ahmed

363 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dropdown navigation doesn't work on mobile devices (JavaScript, HTML, CSS)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related