Failing When Implementing A Hamburger Menu Using Flexbox - html

Question

I am trying to implement a hamburger menu, I have a basic header container that houses two div elements the branding of my site and the navigation links / hamburger icon, I am trying to implement the navigation links as an unordered list, however, I can't seem to put it below the header since it is inside a flex child.
Here's my code:
html,
body {
height: 100%;
}
body {
font-family: sans-serif;
margin: 0;
}
/*
* HEADER: The Web Page's Header
*/
.site-header { /* The Header's Main Container */
height: 54px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px 0 15px;
font-size: 12px;
}
.navigation ul { /* The Unordered List Container */
list-style: none;
}
<header class="site-header">
<div class="kokar-branding">
<img src="https://placehold.it/143x34" alt="Kokar's Logo">
</div>
<nav class="navigation">
<img src="https://placehold.it/24x24" alt="Navigation Hamburger Icon">
<ul>
<li>HOME</li>
<li>EVENTS</li>
<li>VOLUNTEERS</li>
<li>SDGs</li>
<li>JOIN US</li>
<li>ABOUT US</li>
<li class="nav-btn-donate">DONATE</li>
<li>LANGUAGE</li>
</ul>
</nav>
</header>
I am trying to achieve the following effect:

Answer 1

So I would try something like this:
HTML:
<header class="site-header">
<div class="kokar-branding">
<img src="https://placehold.it/143x34" alt="Kokar's Logo">
</div>
<nav class="">
<input type='Checkbox' id="nav" />
<label class="navbar-toggle" for="nav">
<img src="https://placehold.it/24x24" alt="Navigation Hamburger Icon"></label>
<ul class="navigation">
<li>HOME</li>
<li>EVENTS</li>
<li>VOLUNTEERS</li>
<li>SDGs</li>
<li>JOIN US</li>
<li>ABOUT US</li>
<li class="nav-btn-donate">DONATE</li>
<li>LANGUAGE</li>
</ul>
</nav>
</header>
CSS:
html,
body {
height: 100%;
}
body {
font-family: sans-serif;
margin: 0;
}
/*
* HEADER: The Web Page's Header
*/
.site-header {
/* The Header's Main Container */
height: 54px;
background-color: aquamarine;
display: block;
align-items: center;
justify-content: space-between;
padding: 0 15px 0 15px;
font-size: 12px;
}
.navigation {
/* The Unordered List Container */
list-style: none;
display: none;
}
[type="checkbox"] {
display: none;
}
label {
cursor: pointer;
right:0;
}
input[type="checkbox"]:checked ~ * .site-header {
background-color: white;
}
input[type="checkbox"]:checked ~ .navigation {
display: block;
}
Now the Hamburger is below the icon, because of display:block but still the functionality is there. I'm sure you will get the rest.