How to add hamburger icon to navbar - html

Question

I am new into web development, I am learning CSS right now. I have chosen as project for beginning my personal portfolio.
I am creating an easy navigation bar, I wanted to add hamburger Icon, but when I have added Icon to navbar the icon is stack at the bottom of the navbar and the animation(the lines are crossed like X, when button is toggled). I want the Icon in the left corner of the navbar.
I have tried to add the Icon outside the list, to nav but it overflow <h1> tag, so I have tried to add to <aside> parent, but it overflows the <h1> tag as well.
body {
background: linear-gradient(180deg, rgb(70, 65, 70), rgb(172, 34, 32));
}
.menu {
border: 2px solid white;
position: sticky;
display: flex;
flex-direction: row;
height: 95vh;
width: 17%;
background: linear-gradient(180deg, #241023ff, #6b0504ff);
/*linear-gradient(180deg, #2274a5ff, #f75c03ff);*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: 0.5s;
}
.wrapper {
width: 100%;
margin: auto;
display: flex;
justify-content: flex-start;
}
.container {
margin-top: 10px;
width: 100%;
height: 25px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.menu-logo {
height: 3px;
width: 30px;
background-color: white;
}
.showmenu {
width: 25%;
}
/* #endregion Toggle button animation*/
/* #region Hover effect*/
nav:hover,
nav:active {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
li a:hover,
li a:active {
font-weight: bold;
border: 1px solid white;
border-radius: 10px;
background: rgb(246, 246, 246);
transition: 0.5s;
}
li a:hover svg,
li a:active svg {
fill: #f75c03ff;
}
li a:hover span,
li a:active span {
color: #f75c03ff;
stroke: #f75c03ff;
}
/* #endregion Hover effect*/
nav {
width: 100%;
display: list-item;
text-align: center;
justify-content: center;
}
/* #region Welcome text*/
nav .welcome-text {
width: 100%;
margin-left: auto;
display: flex;
justify-content: center;
font-size: 3.5vw;
margin-bottom: 60px;
color: white;
text-align: center;
}
/* #endregion Welcome text*/
/* #region Main content*/
/* #region Wave animation*/
.wave {
width: 50%;
animation-name: wave-animation;
/* Refers to the name of your #keyframes element below */
animation-duration: 2.5s;
/* Change to speed up or slow down */
animation-iteration-count: infinite;
/* Never stop waving :) */
transform-origin: 70% 70%;
/* Pivot around the bottom-left palm */
display: inline-block;
}
#keyframes wave-animation {
0% {
transform: rotate( 0.0deg)
}
10% {
transform: rotate(14.0deg)
}
/* The following five values can be played with to make the waving more or less extreme */
20% {
transform: rotate(-8.0deg)
}
30% {
transform: rotate(14.0deg)
}
40% {
transform: rotate(-4.0deg)
}
50% {
transform: rotate(10.0deg)
}
60% {
transform: rotate( 0.0deg)
}
/* Reset for the last half to pause */
100% {
transform: rotate( 0.0deg)
}
}
/* #endregion Wave animation*/
nav ul {
width: 100%;
height: 100%;
display: list-item;
}
nav ul li {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
li a {
width: 100%;
height: 7%;
text-decoration: none;
display: flex;
text-align: left;
font-size: 100%;
justify-content: center;
margin-bottom: 10px;
}
li a span {
width: 100%;
font-size: 2.7vw;
align-self: center;
color: white;
margin-left: 10px;
}
li a svg {
width: 20%;
height: 20%;
}
<aside class="menu">
<div class="container nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
<nav>
<ul>
<li>
<h1 class="welcome-text">Welcome <span class="wave">👋</span></h1>
</li>
<li>
<a href="#">
<svg viewBox="0 0 24 24" fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg">
<path
d="M21 8.77217L14.0208 1.79299C12.8492 0.621414 10.9497 0.621413 9.77817 1.79299L3 8.57116V23.0858H10V17.0858C10 15.9812 10.8954 15.0858 12 15.0858C13.1046 15.0858 14 15.9812 14 17.0858V23.0858H21V8.77217ZM11.1924 3.2072L5 9.39959V21.0858H8V17.0858C8 14.8767 9.79086 13.0858 12 13.0858C14.2091 13.0858 16 14.8767 16 17.0858V21.0858H19V9.6006L12.6066 3.2072C12.2161 2.81668 11.5829 2.81668 11.1924 3.2072Z" />
</svg>
<span>Home</span>
</a>
</li>
</ul>
</nav>
</aside>
Full code here:
https://jsfiddle.net/Lhawck59/

Answer 1

<div class="hamburger-lines">,
You didn't write a closing tag for this tag, so your code didn't work

Answer 2

you can add oppacity: 0; on the class menu, and add oppacity: 1; on the class showmenu
var logo = document.querySelector('.container');
var menu = document.querySelector('.menu');
logo.addEventListener('click',function(){
menu.classList.toggle('showmenu');
});
body {
background: linear-gradient(180deg, rgb(70, 65, 70), rgb(172, 34, 32));
}
.menu {
border: 2px solid white;
position: sticky;
display: flex;
flex-direction: row;
height: 95vh;
width: 17%;
background: linear-gradient(180deg, #241023ff, #6b0504ff);
/*linear-gradient(180deg, #2274a5ff, #f75c03ff);*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: 0.5s;
opacity: 0;
}
/* #region Toggle button animation*/
.wrapper {
width: 100%;
margin: auto;
display: flex;
justify-content: flex-start;
}
.container {
margin-top: 10px;
width: 100%;
height: 25px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.menu-logo {
height: 3px;
width: 30px;
background-color: white;
}
.showmenu {
width: 25%;
opacity: 1;
}
/* #endregion Toggle button animation*/
/* #region Hover effect*/
nav:hover,
nav:active {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
li a:hover,
li a:active {
font-weight: bold;
border: 1px solid white;
border-radius: 10px;
background: rgb(246, 246, 246);
transition: 0.5s;
}
li a:hover svg,
li a:active svg {
fill: #f75c03ff;
}
li a:hover span,
li a:active span {
color: #f75c03ff;
stroke: #f75c03ff;
}
/* #endregion Hover effect*/
nav {
width: 100%;
display: list-item;
text-align: center;
justify-content: center;
}
/* #region Welcome text*/
nav .welcome-text {
width: 100%;
margin-left: auto;
display: flex;
justify-content: center;
font-size: 3.5vw;
margin-bottom: 60px;
color: white;
text-align: center;
}
/* #endregion Welcome text*/
/* #region Main content*/
/* #region Wave animation*/
.wave {
width: 50%;
animation-name: wave-animation;
/* Refers to the name of your #keyframes element below */
animation-duration: 2.5s;
/* Change to speed up or slow down */
animation-iteration-count: infinite;
/* Never stop waving :) */
transform-origin: 70% 70%;
/* Pivot around the bottom-left palm */
display: inline-block;
}
#keyframes wave-animation {
0% {
transform: rotate(0.0deg)
}
10% {
transform: rotate(14.0deg)
}
/* The following five values can be played with to make the waving more or less extreme */
20% {
transform: rotate(-8.0deg)
}
30% {
transform: rotate(14.0deg)
}
40% {
transform: rotate(-4.0deg)
}
50% {
transform: rotate(10.0deg)
}
60% {
transform: rotate(0.0deg)
}
/* Reset for the last half to pause */
100% {
transform: rotate(0.0deg)
}
}
/* #endregion Wave animation*/
nav ul {
width: 100%;
height: 100%;
display: list-item;
}
nav ul li {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
li a {
width: 100%;
height: 7%;
text-decoration: none;
display: flex;
text-align: left;
font-size: 100%;
justify-content: center;
margin-bottom: 10px;
}
li a span {
width: 100%;
font-size: 2.7vw;
align-self: center;
color: white;
margin-left: 10px;
}
li a svg {
width: 20%;
height: 20%;
}
/* #endregion Main content*/
/* #region footer of navbar*/
ul li div {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 7%;
display: flex;
flex-direction: row;
text-align: left;
justify-content: flex-start;
}
li div img {
width: auto;
height: auto;
border-radius: 50%;
border: 2px solid white;
}
nav div span {
width: 100%;
font-size: 0;
align-self: center;
color: white;
margin-left: 10px;
font-weight: bolder;
}
/* #endregion footer of navbar*/
/*TEST*/
.nav-container {
display: flex;
justify-content: space-between;
align-items: left;
width: 5%;
}
.nav-container .checkbox {
position: absolute;
display: block;
width: 5%;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.nav-container .hamburger-lines {
display: block;
height: 26px;
width: 32px;
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-container .hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: rgb(255, 255, 255);
}
.nav-container .hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.nav-container .hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.nav-container .hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.nav-container input[type="checkbox"]:checked ~ .menu-items {
transform: translateX(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
transform: rotate(45deg);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
transform: scaleY(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
transform: rotate(-45deg);
}
.nav-container input[type="checkbox"]:checked ~ .logo{
display: none;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
/*font-family: 'Noto Sans', sans-serif;*/
}
header{
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/content/content.css">
<link rel="stylesheet" href="css/navbar/navbar.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=Roboto:ital,wght#0,100;0,700;1,300;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/navbar/hamburgerIcon/hamburgerIcon.css">
<title>Portfolio</title>
</head>
<body>
<header>
<h1>Header</h1>
<div class="container nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</header>
<aside class="menu">
<nav>
<ul>
<li>
<h1 class="welcome-text">Welcome <span class="wave">👋</span></h1>
</li>
<li>
<a href="#">
<svg viewBox="0 0 24 24" fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg">
<path d="M21 8.77217L14.0208 1.79299C12.8492 0.621414 10.9497 0.621413 9.77817 1.79299L3 8.57116V23.0858H10V17.0858C10 15.9812 10.8954 15.0858 12 15.0858C13.1046 15.0858 14 15.9812 14 17.0858V23.0858H21V8.77217ZM11.1924 3.2072L5 9.39959V21.0858H8V17.0858C8 14.8767 9.79086 13.0858 12 13.0858C14.2091 13.0858 16 14.8767 16 17.0858V21.0858H19V9.6006L12.6066 3.2072C12.2161 2.81668 11.5829 2.81668 11.1924 3.2072Z" />
</svg>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<svg fill="transparent" stroke="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21 2H6a2 2 0 0 0-2 2v3H2v2h2v2H2v2h2v2H2v2h2v3a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-8 2.999c1.648 0 3 1.351 3 3A3.012 3.012 0 0 1 13 11c-1.647 0-3-1.353-3-3.001 0-1.649 1.353-3 3-3zM19 18H7v-.75c0-2.219 2.705-4.5 6-4.5s6 2.281 6 4.5V18z" />
</svg>
<span>Contact</span>
</a>
</li>
<li>
<a href="#">
<svg fill="transparent" stroke="white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7C17 5.34315 15.6569 4 14 4H10C8.34315 4 7 5.34315 7 7H6C4.34315 7 3 8.34315 3 10V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10C21 8.34315 19.6569 7 18 7H17ZM14 6H10C9.44772 6 9 6.44772 9 7H15C15 6.44772 14.5523 6 14 6ZM6 9H18C18.5523 9 19 9.44772 19 10V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V10C5 9.44772 5.44772 9 6 9Z" />
</svg>
<span>My work</span>
</a>
</li>
<li>
<a href="#">
<svg fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg" class="bi bi-chat-dots-fill" viewBox="0 0 16 16">
<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
</svg>
<span>References</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
</svg>
<span>About</span>
</a>
</li>
</ul>
</nav>
</aside>
<script src="js/script.js"></script>
</body>
</html>