'Website Mobile Navigation bar is visible to the right of the toggle button HTML CSS

Issue

The website works fine in desktop view but the media query navigation bar on mobile is shown in the rightmost corner so it's not really hidden

CSS

links{
    position:absolute;
    background:#f44336;
    padding:5px;
    line-height: 50px;
    height:100vh;
    width:200px;
    top:0;
    right:-200px;
    text-align: left; 
    z-index:2;
    transition: 1s;
    }

js

<SCRIPT>
var navLinks = document.getElementById("navLinks");
function showMenu(){
    navLinks.style.right = "0px";
}
function hideMenu(){
    navLinks.style.right = "-200px";

}
</SCRIPT>
javascripthtmlcssoraclejoinselecttuples


Solution 1:[1]

Set right = "-999px" maybe can work on mobile like what you want:

<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
    navLinks.style.right = "0px";
}
function hideMenu(){
    navLinks.style.right = "-999px";

}
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 VMT

Related Questions