In my project, I have a header panel where the burger button is designed with a width of 32px and height of 24px.
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blueeye</title>
<link rel="stylesheet" href="index.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=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="logo">
<span class="logoStart">blue</span><span class="logoEnd">eye</span>
</div>
<div class="BurgerMenu">
<div class="menuLine menuLine1"></div>
<div class="menuLine menuLine2"></div>
<div class="menuLine menuLine3"></div>
</div>
</div>
</body>
</html>
* {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
}
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
.logo {
margin: 16px;
font: normal normal bold 40px/49px Montserrat;
}
.logoStart {
color: #041731;
}
.logoEnd {
color: #1B6FE0;
}
.menuLine {
height: 6px;
width: 32px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #041731;
margin-bottom: 3px;
}
.BurgerMenu {
margin-right: 16px;
}
* {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
}
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
.logo {
margin: 16px;
font: normal normal bold 40px/49px Montserrat;
}
.logoStart {
color: #041731;
}
.logoEnd {
color: #1B6FE0;
}
.menuLine {
height: 6px;
width: 32px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #041731;
margin-bottom: 3px;
}
.BurgerMenu {
margin-right: 16px;
}
When viewing in the browser, I see this
However, in the design, it seems that the burger icon is larger. Even though I've set the parameters for height and width as in the design.
The header in the design looks like this
What am I doing wrong that I can't achieve the same view as in the design?