Html Question posted in
Some basic documentation can be found here.

Html – Why is my navigation menu working at any page size on Windows and Mac computers but not on iPad and Android phone?

I have made a Web site as a favour for a someone. The general code will likely disappoint but it’s been done this way as it has to work on some niche, legacy technology.

Anyway, it works well enough, except we’ve discovered an issue with the menu. You can drag and resize the window on a Windows or MacOS desktop computer and it works as desired, switching to the ubiquitous three-bar mobile menu when the window gets small enough. However, it doesn’t work at all on either my iPad or Android phone. This kind of navigation is new to me as I took a multi-year break from Web development, so I may be missing something laughably obvious.

Any ideas?

The development site is at: http://rcomp.michaelstubbs.uk

The CSS is in this file:

https://rcomp.michaelstubbs.uk/stylesheet.css

The navigation code included on each page is in this text file:

https://rcomp.michaelstubbs.uk/titlebar.txt

I was going to paste in only the relevant code but it occurred to me that maybe there’s something I don’t think is relevant but is, so just linked to the files instead.

Tags:

2

Answers


  1. 0

    From your code, the CSS responsiveness functionality stops at (720px). Targetting max-width of 720px means the responsiveness will only work on screen sizes below 720px and not above that, if you want the responsiveness to work on iPad then increase the max-width size to iPad size which is (768px) or more.

      @media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
  position: absolute;
  right: 0;
  top: 0;
}}
    Login or Signup to reply.
  2. 0

    You’re welcome. I didn’t notice that earlier, this might be related to using the "onclick" function directly on the link where there’s a hover state. It’s advisable to target the element instead and create an event listener. I have run the code locally and it works on mobile and desktop. I hope it works for you too.

    <script>
 document.addEventListener("DOMContentLoaded", function () {
     // Select the menu icon element
     var menuIcon = document.querySelector('.icon');

     // Add a click event listener to the menu icon
     menuIcon.addEventListener("click", function (e) {
        e.preventDefault();
        // Select the navigation element
        var nav = document.getElementById("myTopnav");

        // Toggle the responsive class
        if (nav.className === "topnav") {
           nav.className += " responsive";
        } else {
           nav.className = "topnav";
        }
     });
  });
 </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search