Responsive navigation toggle-CodePudding

I have been working on my portfolio website and I can't get my responsive navigation working properly.

The normal navigation works fine, but the responsive navigation toggle menu presents issues. When the toggle is clicked and changes from the Menu Icon to the X Icon, it changes position to underneath the bottom left of the drop-down navigation li. I would like for the X Icon to remain fixed to the top right of the screen, where the Menu Icon is located before clicking and the navigation li to be positioned underneath.

I have been trying to solve this issue and cannot seem to find a solution. Any feedback would be appreciated, HTML, CSS & JavaScript below.

$(document).ready(function() {
  $("div.container_nav").click(function() {
    $("div.container_nav").toggleClass("change");
    $("ul.nav").toggleClass("toggle-menu");
  });
});

nav {
  letter-spacing: 1.9px;
  float: right;
  padding: 10px;
  margin: 60px 150px 0px 0px;
}

.nav>li {
  display: inline-block;
}

.nav>li>a {
  color: #000;
  font-size: 12px;
  padding: 18px;
  transition: all 0.5s ease;
  text-transform: uppercase;
}

.nav>li>a:hover {
  color: #c3dbc5;
}

.nav .current {
  font-weight: bolder;
}

@media screen and (max-width: 900px) {
  nav {
    margin: 0px;
    padding: 0px;
  }
  .nav {
    display: none;
  }
  ul {
    padding: 0px;
  }
  .nav>li {
    margin-top: 65px;
    padding: 15px 0px 0px 15px;
    width: 100%;
    list-style: none !important;
    text-align: center;
  }
  .nav>li>a {
    font-size: 16px;
  }
  .container_nav {
    display: block;
    cursor: pointer;
    position: relative;
    padding: 50px;
    margin-top: 0px;
  }
  .nav.toggle-menu {
    display: block;
    cursor: pointer;
    margin-top: -30px;
  }
  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  .change .bar2 {
    opacity: 0;
  }
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">

  <ul >
    <li><a href="index.htm"  title="Work">Work</a></li>
    <li><a href="aboutme.htm" title="About">About</a></li>
    <li><a href="files/Bserene_Resume.pdf" target="_blank" title="Resume">Resume</a></li>
    <li><a href="contact.htm" title="Contact">Contact</a></li>

  </ul>

  <div >

    <div ></div>
    <div ></div>
    <div ></div>

  </div>

</nav>

CodePudding user response：

Simply add the .container_nav and bar markup before the ul.nav. I'd also remove the float as it is deprecated and use flex instead on nav and use flex-flow: column;. Then you can set align-self: flex-end; on .container_nav.

Finally, you can add display: flex; on .nav also with justify-content: flex-end; to get the nav items to the far right when not in mobile.

Side note: If you want to remove the overflow on the x-axis remove the padding on .nav>li in the media-query. This will also bring the dropdown to its true center.

$(document).ready(function() {
  $("div.container_nav").click(function() {
    $("div.container_nav").toggleClass("change");
    $("ul.nav").toggleClass("toggle-menu");
  });
});

nav {
  letter-spacing: 1.9px;
  padding: 10px;
  margin: 60px 150px 0px 0px;
  display: flex;
  flex-flow: column;
}

.container_nav {
  align-self: flex-end;
}

.nav {
  display: flex;
  justify-content: flex-end;
}

.nav>li {
  display: inline-block;
}

.nav>li>a {
  color: #000;
  font-size: 12px;
  padding: 18px;
  transition: all 0.5s ease;
  text-transform: uppercase;
}

.nav>li>a:hover {
  color: #c3dbc5;
}

.nav .current {
  font-weight: bolder;
}

@media screen and (max-width: 900px) {
  nav {
    margin: 0px;
    padding: 0px;
  }
  .nav {
    display: none;
  }
  ul {
    padding: 0px;
  }
  .nav>li {
    margin-top: 65px;
    padding: 15px 0px 0px 15px;
    width: 100%;
    list-style: none !important;
    text-align: center;
  }
  .nav>li>a {
    font-size: 16px;
  }
  .container_nav {
    display: block;
    cursor: pointer;
    position: relative;
    padding: 50px;
    margin-top: 0px;
  }
  .nav.toggle-menu {
    display: block;
    cursor: pointer;
    margin-top: -30px;
  }
  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  .change .bar2 {
    opacity: 0;
  }
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <ul >
    <li><a href="index.htm"  title="Work">Work</a></li>
    <li><a href="aboutme.htm" title="About">About</a></li>
    <li><a href="files/Bserene_Resume.pdf" target="_blank" title="Resume">Resume</a></li>
    <li><a href="contact.htm" title="Contact">Contact</a></li>
  </ul>
</nav>

CodePudding user response：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    #nav {
        letter-spacing: 1.9px;
        float: right;
        padding: 10px;
        margin: 60px 150px 0px 0px;
    }

    #nav>li {
        display: inline-block;
    }

    #nav>li>a {
        color: #000;
        font-size: 12px;
        padding: 18px;
        transition: all 0.5s ease;
        text-transform: uppercase;
    }

    #nav>li>a:hover {
        color: #c3dbc5;
    }

    #nav.current {
        font-weight: bolder;
    }


    @media screen and (max-width: 900px) {

        #nav {
            margin: 0px;
            padding: 0px;
        }

        #nav {
            display: none;
        }

        ul {
            padding: 0px;
        }

        #nav>li {
            margin-top: 65px;
            padding: 15px 0px 0px 15px;
            width: 100%;
            list-style: none !important;
            text-align: center;
        }

        #nav>li>a {
            font-size: 16px;
        }

        #container_nav {
            display: block;
            cursor: pointer;
            position: relative;
            padding: 50px;
            margin-top: 0px;
        }

        .toggle-menu {
            display: block !important;
            cursor: pointer;
            margin-top: -30px;
        }

        .bar1,
        .bar2,
        .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
        }

        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }

        .change .bar2 {
            opacity: 0;
        }

        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }
    }
</style>
</head>

<body>
<nav>

    <ul id="nav">
        <li><a href="index.htm"  title="Work">Work</a></li>
        <li><a href="aboutme.htm" title="About">About</a></li>
        <li><a href="files/Bserene_Resume.pdf" target="_blank" title="Resume">Resume</a></li>
        <li><a href="contact.htm" title="Contact">Contact</a></li>

    </ul>

    <div id="container_nav">

        <div ></div>
        <div ></div>
        <div ></div>

    </div>

</nav>
<script>
    let click = document.getElementById("container_nav");
    click.addEventListener("click", () => {
        click.classList.toggle("change");
        let ul = document.getElementById("nav");
        ul.classList.toggle("toggle-menu");
    }, true);

</script>
</body>

</html>

This looks fine on my end, sorry I can't elaborate, I'm at uni.