Navigation bar is not appearing

Question

I'm trying to create a responsive navigation bar with CSS animation. I'm using this code Codepen_Code, it's not running properly on my laptop. When I run it then the only checkbox appears and below that list of the navigation. Please help me and suggest me if any kind of CDN I have to use for it.

HTML Code

<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
            <span class="navigation__icon">&nbsp;</span>
</label>
 <div class="navigation__background">&nbsp;</div>
<nav class="navigation__nav">
<ul class="navigation__list">
  <li class="navigation__item"><a href="#" class="navigation__link">Home</a> 
</li>
  <li class="navigation__item"><a href="#" class="navigation__link">About 
us</a> </li>
  <li class="navigation__item"><a href="#" class="navigation__link">Contact 
Us</a> </li>
</ul>
</nav>
</div>

CSS

.navigation {

    &__checkbox {
        display: none;

    }

    &__button {
        background-color: #fff;
        height: 7rem;
        width: 7rem;
        border-radius: 50%;
        position: fixed;
        top: 4rem;
        right: 6rem;
        z-index: 2000;
        box-shadow: 0 1rem 3rem rgba(#000, .2);
        text-align: center;
        cursor: pointer;
    }

    &__background {
        height: 6rem;
        width: 6rem;
        border-radius: 50%;
        position: fixed;
        top: 4.5rem;
        right: 6.5rem;
        background-image: radial-gradient(#2998ff, #5643fa);
        z-index: 1000;
        transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
    }

    &__nav {
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1500;
        opacity: 0;
        width: 0;
        transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    &__list {
        list-style: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100%;
    }

    &__link {

        &:link,
        &:visited {
            display: inline-block;
            font-size: 3rem;
            font-weight: 300;
            padding: 1rem 2rem;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
            background-size: 230%;
            transition: all .4s;
        }

        &:hover,
        &:active {
            background-position: 100%;
            color: #2998ff;
            transform: translateX(1rem);
        }
    }

    &__checkbox:checked ~ &__background {
        transform: scale(80);
    }

    &__checkbox:checked ~ &__nav {
        opacity: 1;
        width: 100%;
    }

    &__icon {
        position: relative;
        margin-top: 3.5rem;

        &,
        &::before,
        &::after {
            width: 3rem;
            height: 2px;
            background-color: #333;
            display: inline-block;
        }

        &::before,
        &::after {
            content: "";
            position: absolute;
            left: 0;
            transition: all .2s;
        }

        &::before { top: -.8rem }
        &::after { bottom: -.8rem }
    }

    &__button:hover &__icon::before {
        top: -1rem;
    }

    &__button:hover &__icon::after {
        bottom: -1rem;
    }

    &__checkbox:checked + &__button &__icon {
        background-color: transparent;
    }

    &__checkbox:checked + &__button &__icon::before {
        transform: rotate(135deg);
        top: 0;
    }

    &__checkbox:checked + &__button &__icon::after {
        transform: rotate(-135deg);
        bottom: 0;
    }
}

Answer 1

Now I realize that the Codepen wasn't yours, the problem is that you do not have the necessary installation of Sass to compile the same code from the Codepen locally.

Using a converter, you can easily convert someone else's Sass to standard CSS and use that for your own project:

.navigation__checkbox {
  display: none;
}

.navigation__button {
  background-color: #fff;
  height: 7rem;
  width: 7rem;
  border-radius: 50%;
  position: fixed;
  top: 4rem;
  right: 6rem;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  text-align: center;
  cursor: pointer;
}

.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 4.5rem;
  right: 6.5rem;
  background-image: radial-gradient(#2998ff, #5643fa);
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navigation__list {
  list-style: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.navigation__link:link,
.navigation__link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 230%;
  transition: all 0.4s;
}

.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: #2998ff;
  transform: translateX(1rem);
}

.navigation__checkbox:checked~.navigation__background {
  transform: scale(80);
}

.navigation__checkbox:checked~.navigation__nav {
  opacity: 1;
  width: 100%;
}

.navigation__icon {
  position: relative;
  margin-top: 3.5rem;
}

.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
  width: 3rem;
  height: 2px;
  background-color: #333;
  display: inline-block;
}

.navigation__icon::before,
.navigation__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: all 0.2s;
}

.navigation__icon::before {
  top: -0.8rem;
}

.navigation__icon::after {
  bottom: -0.8rem;
}

.navigation__button:hover .navigation__icon::before {
  top: -1rem;
}

.navigation__button:hover .navigation__icon::after {
  bottom: -1rem;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon {
  background-color: transparent;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
  transform: rotate(135deg);
  top: 0;
}

.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
  transform: rotate(-135deg);
  bottom: 0;
}

<div class="navigation">
  <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
  <label for="navi-toggle" class="navigation__button">
                <span class="navigation__icon">&nbsp;</span>
  </label>
  <div class="navigation__background">&nbsp;</div>
  <nav class="navigation__nav">
    <ul class="navigation__list">
      <li class="navigation__item"><a href="#" class="navigation__link">Home</a> </li>
      <li class="navigation__item"><a href="#" class="navigation__link">About us</a> </li>
      <li class="navigation__item"><a href="#" class="navigation__link">Careers</a> </li>
      <li class="navigation__item"><a href="#" class="navigation__link">Projects</a> </li>
      <li class="navigation__item"><a href="#" class="navigation__link">Contact Us</a> </li>
    </ul>
  </nav>
</div>

Answer 2

this styling is SCSS and you are using css that's why it's show a checkbox i have checked it by myself and i change from SCSS to css and i saw the result so please use SCSS and all will be fine

scss link  https://codepen.io/AElkhodary/pen/pVVNBw
css link https://codepen.io/AElkhodary/pen/errBoy

and i have made for you a version with css

https://codepen.io/AElkhodary/pen/zjjoVa