DEV Community 👩‍💻👨‍💻

Himanshupal0001
Himanshupal0001

Posted on

Css stopped working in codepen.io!!!

Hi folks, I am a noob in css and try to create a dynamic navigation bar from youtube refrence. But after [.navigation ul li a] this line of css it stopeed rendering. No effects so far. Please help me out. . Here's my pen.

HTML code
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>


<div class="navigation">
  <ul>
    <li class="list activate">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="home-outline"></ion-icon>
        <span class="text">Home</span>
      </a>
    </li>
    <li class="list">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="person-outline"></ion-icon>
        <span class="text">Profile</span>
      </a>
    </li>
    <li class="list">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="chatbubble-outline"></ion-icon>
        <span class="text">Massage</span>
      </a>
    </li>
    <li class="list">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="image-outline"></ion-icon>
        <span class="text">Photo</span>
      </a>
    </li>

    <li class="list">
      <a href="#">
        <span class="icon"></span>
        <ion-icon name="settings-outline"></ion-icon>
        <span class="text">Setting</span>
      </a>
    </li>
    <div class="indecator">
    </div>
  </ul>
</div>

Enter fullscreen mode Exit fullscreen mode
CSS Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "popins", sans-serif;
}

:root  /* :root is a CSS pseudo-class selector used to select the element that represents the root of the document. In HTML, this is always the <html> element, since it is the highest-level ancestor of all other elements on the page */ {
  --clr: #222327; /*  variable in css starts with -- */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--clr);
}

.navigation {
  position: relative;
  width: 400px;
  height: 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.navigation ul {
  display: flex;
  width: 350px;
}

.navigation ul li {
  position: relative;
  list-style: none;
  width: 70px;
  height: 70px;
  z-index: 1;
}

.navigation ul li a  /*not responding from here till end */
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or5vnvsaowd5jpeb6302.png)
 {   
  position: relative;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  font-weight: 500;
}

.navigation ul li a .icon {
  position: relative;
  display: block;
  line-height: 75px;
  font-size: 1.5em;
  text-align: center;
  transition: 0.5s;
  color: var(--clr);
}

.navigation ul li:active a .icon
{
  tranform: translateY(-50px);
}

.navigation ul li a .text{
  position: relative;
  color: var(--clr);
  font-weight: 400;
  font-size: 1.75em;
  latter-spacing: 0.5em;
  transition: 0.5s;
  opacity: 0;
}

.navigation ul li:active a .text
{
  opacity: 1;
  transform: translateY(-10px);
}

.indicator
{
  position: absolute;
  width: 70px;
  height: 70px;
  background: #29fd53;
  border-radius: 50%;
  border: 2px solid var(--clr);
  transition: 0.5s;
}

.indicator::before
{
  content: '';
  position: absolute;
  top: 50%;
  ledt: -20px;
  width: 20px;
  height: 20px;
  background: red;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
ironcladdev profile image
IroncladDev
.navigation ul li a  /*not responding from here till end */
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or5vnvsaowd5jpeb6302.png)
 {   
  position: relative;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  font-weight: 500;
}
Enter fullscreen mode Exit fullscreen mode

Remove the line that says Image Description

Collapse
 
himanshupal0001 profile image
Himanshupal0001

Sorry, Can't find the attachment.

Collapse
 
pandademic profile image
Pandademic

he mean's the line that says:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or5vnvsaowd5jpeb6302.png)

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now