Html - Why is my menu going off the screen, but its still visible?

AlexZhang
June 23, 2023
125 views
0 votes
2 Answers

I’m currently creating the menu sidebar for mobile devices and when I hide the menu, it ends up going off the screen, but still visible once you swipe to the right.
screenshot of problem

Also, feel free to point out any issues in my code since I’m pretty new to web development!

      <nav>
        <a href="index.html"> LOGO</a>
        <div class="nav-links" id="navLinks">
          <i class="fa-solid fa-xmark icon" onclick="hideMenu()"></i>
          <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">GALLERY</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">CONTACT</a></li>

          </ul>
        </div>
        <i class="fa-solid fa-bars icon" onclick="showMenu()"></i>
      </nav>

@media(max-width: 700px){
  .text-box h1{
    font-size:30px;
  }
  .nav-links ul li{
    display: block;
    font-size: 30px;
  }
  .nav-links{
    position: absolute;
    background:#337195;
    height:100vh;
    width:250px;
    top:0;
    right:-300px;
    text-align:left;
    z-index: 2;
    transition: 1s;
  }
  .icon { 
    display: block;
    color:white;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }
  .nav-links ul{
    padding: 30px;
  }
  .nav-links ul li::after{
    width: 100%;
    background:white; 
  }

}

Javascript of menu show/hide animation

<script>
  var navLinks = document.getElementById("navLinks")

  function showMenu(){
    navLinks.style.right = "0"
  }
  function hideMenu(){
    navLinks.style.right = "-300px"
  }
</script>

Answers

- IanDonahue
- June 23, 2023 at 1:24 am
- 0 votes
0
I don’t think there is enough context to answer the question to your specific situation BUT this is what I would do based on what I can see.

It looks like there isn’t anything hiding the navigation element (<nav>).

In open state add display: block; to the navigation
```
nav {
  display: block;
}
```
During close state change the css to display: none; to the parent navigation
```
nav {
   display: none;
}
```
There are a number of ther ways of achiveing this, but I’d start here.
Login or Signup to reply.