I'm trying to add a responsive hamburger nav to my pre-existing navbar, but for some reason it-CodePudding

I was following along with a tutorial to try and figure out how to insert a responsive hamburger icon for my navbar using css html and a tad bit of js. However I've gotten halfway through the video to the portion where I should be able to see the hamburger icon and for some reason it isn't showing up on screen. I'm able to see it outlined when I inspect my document on firefox, so honestly I'm at a loss for why it isn't appearing on screen. I'm going to post my code below, sorry if I do it improperly this is my first time posting on here, so I'm unsure of the norms.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex no tutorial</title>
  <link rel="stylesheet" href="style.css">

  <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Oswald:wght@300;400&family=Roboto Slab:wght@500;600&family=Work Sans:wght@300;400&display=swap" rel="stylesheet">
</head>

<body>
    <div >
    <nav >
         <div >
            <p ><h3 >K13-News</h3></p>
            <!--Hamburger nav-->
            <a href="#" >
                <span ></span>
                <span ></span>
                <span ></span>
            </a>
            <ul >
                <li><a href="#">Home</a> </li>
                <li><a href="#">Trending</a></li>
                <li><a href="#">Today</a></li>
                <li><a href="#">Politics</a></li>
            </ul>
        </div>
    </nav>

        <div >
            <div >
                <p><h3>Trump found innocent on allegations of murder!</h3> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Nisl suscipit adipiscing bibendum est ultricies integer quis. Viverra justo nec ultrices dui sapien eget. Nisi vitae suscipit tellus mauris a diam maecenas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Donec ac odio tempor orci. Purus in massa tempor nec feugiat. Facilisi etiam dignissim diam quis. Dapibus ultrices in iaculis nunc sed augue lacus. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Libero id faucibus nisl tincidunt eget nullam non nisi. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. In cursus turpis massa tincidunt dui ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Diam maecenas sed enim ut sem viverra. Purus sit amet volutpat consequat.
                </p>
            </div>

            <div >
                <p>In nibh mauris cursus mattis molestie a iaculis. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Adipiscing elit ut aliquam purus sit. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Sed felis eget velit aliquet. Adipiscing elit ut aliquam purus sit. Nec feugiat in fermentum posuere urna nec tincidunt. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Donec adipiscing tristique risus nec feugiat in. Pharetra diam sit amet nisl suscipit adipiscing. Malesuada fames ac turpis egestas maecenas pharetra convallis. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Sagittis eu volutpat odio facilisis mauris sit amet massa. Mattis vulputate enim nulla aliquet porttitor lacus. Lacus vel facilisis volutpat est velit egestas dui id. Pharetra et ultrices neque ornare aenean euismod elementum. Orci eu lobortis elementum nibh tellus molestie nunc. Diam vulputate ut pharetra sit amet aliquam.</p>
            </div>

        </div>


        
    <!--End of wrapper div-->    
    </div>
</body>

/* this is so that padding doesn't effect the size of elements*/
*, *::before, ::after {box-sizing:border-box } 

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Oswald:wght@300;400&family=Roboto Slab:wght@500;600&family=Work Sans:wght@300;400&display=swap');

body{
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
   /*obv the background color of whole page*/
    background-color: #201D1D;
    color: white;
}

.wrapper{
    margin:auto;
    margin:20px
}

/* logo section*/
h3.logo{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: #011213;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    font-family: 'Work Sans', sans-serif;
    /*color of the nav font*/
    color: #201D1D;
}



.nav-links li{
    display: inline-block;
    padding: 0px 10px;
}

.nav-links li a{
    transition: all 0.3s ease 0s;
}
/*hover color for nav font*/
.nav-links li a:hover{
    color:white;
    text-decoration: underline #201D1D 2px ;
    text-underline-offset: 5px;
}

/*flex container that controls the nav bar*/
.nav-content{
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #09ADC3;
    border-radius: 25px ;
    height: 8vh; 
    margin-bottom: 20px;
    
}

.columns{
    display: flex; 
    flex-wrap:wrap;
    align-items: center;
}

h3{
    font-family: 'Roboto Slab', serif;
    
}

.col{
    padding:10px;
}
.col-50{
    width:50%
    
}

@media  screen and (max-width:1000px) {
    .col-50{
        width:100%
    }
}

/*style for the hamburger menu which isn't working for some reason*/
.toggle-button{
    position:absolute;
    top:2rem;
    right:1rem;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    width: 31px;
    height:21px;
}

.toggle-button .bar{
    height:3px;
    width:100%;
    color:white;
    border-radius:10px;
}

CodePudding user response：

Very close!!

Just missing the border property for the .bar class:

.toggle-button .bar {
  // height: 3px;
  width: 100%;
  border-bottom: 2px solid white;
  border-radius: 10px;
}

You had set color: white which only applies to the text inside elements. By setting the border (in my answer border-bottom) you're able to see have the white lines.

From there it will just be a case of positioning and the click behaviour...

/* this is so that padding doesn't effect the size of elements*/

*,
*::before,
 ::after {
  box-sizing: border-box
}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Oswald:wght@300;400&family=Roboto Slab:wght@500;600&family=Work Sans:wght@300;400&display=swap');
body {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /*obv the background color of whole page*/
  background-color: #201D1D;
  color: white;
}

.wrapper {
  margin: auto;
  margin: 20px
}


/* logo section*/

h3.logo {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: #011213;
}

li,
a {
  text-decoration: none;
  list-style-type: none;
  font-family: 'Work Sans', sans-serif;
  /*color of the nav font*/
  color: #201D1D;
}

.nav-links li {
  display: inline-block;
  padding: 0px 10px;
}

.nav-links li a {
  transition: all 0.3s ease 0s;
}


/*hover color for nav font*/

.nav-links li a:hover {
  color: white;
  text-decoration: underline #201D1D 2px;
  text-underline-offset: 5px;
}


/*flex container that controls the nav bar*/

.nav-content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #09ADC3;
  border-radius: 25px;
  height: 8vh;
  margin-bottom: 20px;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

h3 {
  font-family: 'Roboto Slab', serif;
}

.col {
  padding: 10px;
}

.col-50 {
  width: 50%
}

@media screen and (max-width:1000px) {
  .col-50 {
    width: 100%
  }
}


/*style for the hamburger menu which isn't working for some reason*/

.toggle-button {
  position: absolute;
  top: 2rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 31px;
  height: 21px;
}

.toggle-button .bar {
  // height: 3px;
  width: 100%;
  border-bottom: 2px solid white;
  border-radius: 10px;
}

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

<head>
  <meta charset="UTF-8">
  <title>Flex no tutorial</title>
  <link rel="stylesheet" href="style.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Oswald:wght@300;400&family=Roboto Slab:wght@500;600&family=Work Sans:wght@300;400&display=swap" rel="stylesheet">
</head>

<body>
  <div >
    <nav >
      <div >
        <p >
          <h3 >K13-News</h3>
        </p>
        <!--Hamburger nav-->
        <a href="#" >
          <span ></span>
          <span ></span>
          <span ></span>
        </a>
        <ul >
          <li><a href="#">Home</a> </li>
          <li><a href="#">Trending</a></li>
          <li><a href="#">Today</a></li>
          <li><a href="#">Politics</a></li>
        </ul>
      </div>
    </nav>

    <div >
      <div >
        <p>
          <h3>Trump found innocent on allegations of murder!</h3> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit.
          Nisl suscipit adipiscing bibendum est ultricies integer quis. Viverra justo nec ultrices dui sapien eget. Nisi vitae suscipit tellus mauris a diam maecenas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Donec ac odio
          tempor orci. Purus in massa tempor nec feugiat. Facilisi etiam dignissim diam quis. Dapibus ultrices in iaculis nunc sed augue lacus. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Libero id faucibus nisl tincidunt eget nullam
          non nisi. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. In cursus turpis massa tincidunt dui ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pretium fusce id velit ut tortor pretium viverra suspendisse.
          Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Diam maecenas sed enim ut sem viverra. Purus sit amet volutpat consequat.
        </p>
      </div>

      <div >
        <p>In nibh mauris cursus mattis molestie a iaculis. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Adipiscing elit ut aliquam purus sit. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Vestibulum rhoncus
          est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Sed felis eget velit aliquet. Adipiscing elit ut aliquam purus sit. Nec feugiat in fermentum posuere urna
          nec tincidunt. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Donec adipiscing tristique risus nec feugiat in. Pharetra diam sit amet nisl suscipit adipiscing. Malesuada fames ac turpis egestas maecenas pharetra
          convallis. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Sagittis eu volutpat odio facilisis mauris sit amet massa. Mattis vulputate enim nulla aliquet porttitor lacus. Lacus vel facilisis volutpat est velit egestas dui id. Pharetra
          et ultrices neque ornare aenean euismod elementum. Orci eu lobortis elementum nibh tellus molestie nunc. Diam vulputate ut pharetra sit amet aliquam.</p>
      </div>

    </div>



    <!--End of wrapper div-->
  </div>
</body>

CodePudding user response：

Another solution to this problem would simply be to apply a background-color property to the .bar element. The reason my original code didn't work, as Harrison pointed out is because I used color:white, when I should have used background-color:white.