CODEWITHSUNDEEP
htmlcss
saadsawash
saadsawash

Reputation: 23

Failing When Implementing A Hamburger Menu Using Flexbox

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><a href="#">HOME</a></li>
                    <li><a href="#">EVENTS</a></li>
                    <li><a href="#">VOLUNTEERS</a></li>
                    <li><a href="#">SDGs</a></li>
                    <li><a href="#">JOIN US</a></li>
                    <li><a href="#">ABOUT US</a></li>
                    <li class="nav-btn-donate"><a href="#">DONATE</a></li>
                    <li><a href="#">LANGUAGE</a></li>
                </ul>
            </nav>
        </header>

I am trying to achieve the following effect:

hamburger menu example

Upvotes: 2

Views: 451

Answers (1)

TobiasSchnier
TobiasSchnier

Reputation: 80

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><a href="#">HOME</a></li>
      <li><a href="#">EVENTS</a></li>
      <li><a href="#">VOLUNTEERS</a></li>
      <li><a href="#">SDGs</a></li>
      <li><a href="#">JOIN US</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li class="nav-btn-donate"><a href="#">DONATE</a></li>
      <li><a href="#">LANGUAGE</a></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.

Upvotes: 1

Related Questions