Why are the spans not showing up in my browser?-CodePudding

I'm trying to make a sort of 'hamburger menu' by making three spans in html and adding styles in css, but nothing is showing up in my browser. I have tried the CSS in two ways, but they don't work. If someone could help me out, that would be great :)


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="CSS/styles.css"> 
</head>
<body>

  <header >
    <nav class = "flex flex-jc-sb">
      <a href="#" >
        <span></span>
        <span></span>                           #HERE IS THE PROBLEM
        <span></span>
      </a>
    </nav>
  </header>

#FIRST OPTION CSS
.header{
    nav{
        padding: 24px; 
    }
    &__menu{

        span {
            display: block; 
            width: 26 px;
            height: 2 px;
            background-color: $darkBlue;

            &:not(:last-child){
                margin-bottom: 3px;
            }
        
        }
    }
}



#SECOND OPTION CSS
.header{
    nav{
        padding: 24px; 
    }

    span{
        display: block; 
        width: 26 px;
        height: 2 px;
        background-color: $darkBlue;
    }
}

CodePudding user response：

Try this, you should not use space in width:26 px; you should have used this width:26px

.header nav {
  padding: 24px; 
}
.header span {
  display: block; 
  width: 26px;
  height: 4px;
  background-color: darkblue;
  margin:5px;
}

<header >
    <nav class = "flex flex-jc-sb">
      <a href="#" >
        <span></span>
        <span></span>  
        <span></span>
      </a>
    </nav>
  </header>

CodePudding user response：

You are using sass not css you should use something like webpack or live-sass to compile it

it you want do it with pure css your code will be like this :


.header nav{
        padding: 24px; 
}
.header span{
        display: block; 
        width: 26 px;
        height: 2 px;
        background-color: navy;
}