I'm trying to add a responsive hamburger nav to my pre-existing navbar, but for some reason it isn't showing up
Question
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,wght@9..144,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 class="wrapper">
<nav class="navbar">
<div class="nav-content">
<p class="logo"><h3 class="logo">K13-News</h3></p>
<!--Hamburger nav-->
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="nav-links">
<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 class="columns">
<div class="col col-50">
<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 class="col col-50">
<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,wght@9..144,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;
}
2 answers
solution1
1 ACCPTED 2022-12-20 16:11:12
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,wght@9..144,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.wght@9.,144;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 class="wrapper"> <nav class="navbar"> <div class="nav-content"> <p class="logo"> <h3 class="logo">K13-News</h3> </p> <,--Hamburger nav--> <a href="#" class="toggle-button"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a> <ul class="nav-links"> <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 class="columns"> <div class="col col-50"> <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 class="col col-50"> <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>
solution2
0 2022-12-20 17:57:19
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
My <nav> element isn't showing up in IE7 at all
My nav bar isn't responsive at all
Why is my responsive navbar isn't working?
I'm trying to do a Hamburger Menu, but it won't show up when I click it
Why aren't my nav links showing up now on my navbar?
I need some help my pictures aren't showing up on this site i'm making
Bootstrap Navbar Hamburger Icon Not Showing Up
I'm trying to make a canvas on my page but it isn't working
Responsive Hamburger Nav Border
My logo in nav isn't responsive, using flexbox
Related Tags