css animation position toggle transition

How can I make this transition work and let the hamburger icon stay on top?

I am new to programming, just started a few months ago, but trying to create a portfolio page, I have watched other peoples examples, and trying to create my own. My problem is that I am trying to transition the navbar with a hamburger icon, which is working, but I have set the navbar to be fixed(this also works) and span across the viewport, which doesn't work. The width and the height of the element is just as much as my list elements. I cannot see where the problem is, also when I toggle the class, i.e. click the button to close the navbar it does not transition it just disappears. I will past my code here, will be glad if somebody can give me a hint. Also, I have the hamburger icon on the right and title on the left which I want to stay on top always, added z-index but it does not work.. Thanks, and apologies if I did not make my question very clear.

HTML code

<body>
    <div>
        <!-- create navbar with hamburger icon -->
        <nav class="navbar">
            <h2 class="myName">this.szabi<span class="braces">( )</span></h2>
            <div class="menu-btn">
                <div id="menuButtonBurger"></div>
            </div>            
        </nav>
        <div class="info">
            <ul>
                <li><a href="#about">About Me</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>           
            </ul>
        </div>
        <section id="about"></section>
        <!-- create a small introduction place with a picture -->
        <!-- create a div for technologies ive learnt -->
        <!-- create a div to place my projects -->
        <!-- create a div for contact information, social icons -->
        <!-- create a footer -->
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>

CSS code

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  background-color: transparent;
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-between;
}

.myName {
  font-family: Comfortaa;
  font-weight: 500;
  color: #f05454;
  z-index: 101;
}

.braces {
  font-size: 2rem;
}

.menu-btn {
  position: relative;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #f05454;
  border-radius: 50%;
  z-index: 102;
}

#menuButtonBurger {
  width: 2rem;
  height: 0.25rem;
  background-color: #f05454;

  border-radius: 5px;
}

#menuButtonBurger::before,
#menuButtonBurger::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 0.25rem;
  background-color: #f05454;

  border-radius: 5px;
}

#menuButtonBurger::before {
  transform: translateY(-8px);
}

#menuButtonBurger::after {
  transform: translateY(8px);
}

.info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: -webkit-linear-gradient(-45deg, #000000, #434343);
  background: linear-gradient(-45deg, #000000, #434343);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: Comfortaa, Helvetica, sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2.5;
  z-index: 100;
  transform: translateX(1500px);
}

.info .open {
  background: -webkit-linear-gradient(-45deg, #000000, #434343);
  background: linear-gradient(-45deg, #000000, #434343);
  transform: translateX(-1500px);
  transition: all 500ms linear;
}

.info ul li {
  list-style: none;
}

.info li a,
.info li a:link,
.info li a:visited,
.info li a:active {
  text-decoration: none;
  color: #fff;
}

.info li a:hover {
  color: #f05454;
}

/* change it */
#about {
  width: 100%;
  height: 1000px;
  background-color: teal;
}

JavaScript code

const hamburger = document.querySelector('.menu-btn');
const info = document.querySelector('.info');
const list = document.querySelector('ul');

hamburger.addEventListener('click', menuToggle);

function menuToggle() {
    console.log('clicked')
    info.classList.toggle('open');
    list.classList.toggle('open');
}

Solution

The width and the height of the element is just as much as my list elements.

Yes, that is the default behavior of elements in a div. To change that, either define a custom width for your info div in your existing CSS section, just like that:

.info .open {
  background: -webkit-linear-gradient(-45deg, #000000, #434343);
  background: linear-gradient(-45deg, #000000, #434343);
  transform: translateX(-1500px);
  transition: all 500ms linear;
  width: 270px; // Defining a custom width for the div
}

Or set a custom padding for the ul elements, like that:


.info ul {
  padding-left: 30px; // Defining a padding to every list item, which causes outer div to grow according to that.
  padding-right: 30px;
}

Now, regarding the transition. I tried to do something that would not change your code so much. First, We add a html class for handling when the info menu and the ul are closed:

div class="info closed">
  <ul class="closed">
  <!-- Rest of the code... -->

Then we create a new CSS code for handling the closed transition:

.info .closed {
  background: -webkit-linear-gradient(-45deg, #000000, #434343);
  background: linear-gradient(-45deg, #000000, #434343);
  transition: all 500ms linear;
}