I'm trying to create a hamburger menu and have written the following code:
<header class="header">
<nav class="flex flex-jc-sb flex-ai-c">
<a href="/" class="header__logo">
<img src="images/logo.svg" alt="easybank" />
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
and here is the corresponding SCSS code:
.header{
nav{
padding: 24px;
}
&__logo{
img{
}
}
&__menu{ //hamburger menu
> span{
display: block;
position: absolute;
width: 4px;
height: 1px;
background-color: $darkBlue;
&:not(:last-child){
margin-bottom: 5px;
}
}
}}
However, when I revisit the website, the hamburger menu isn't displaying. Upon inspection, it shows that span 0x17. Can someone help me troubleshoot this issue? Thank you in advance.