CODEWITHSUNDEEP
htmlcss
Minecraft123
Minecraft123

Reputation: 41

Making a simple Hamburger Menu

I was following a tutorial on how to make a responsive navbar for both desktop and mobile users. I didn't exactly follow through because I had to change my CSS because I had an image logo. When I was attempting to make the hamburger menu, I couldn't see all my nav-links in a column. Just to clarify, I want to make the hamburger lines on the right side and make it function like an app.

/* Basic */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Acme', sans-serif;
  background: white;
  line-height: 1.6;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}


/* Navbar */

.navbar {
  display: flex;
  background: #004C66;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  padding: 0 30px;
}

.navbar .logo img {
  width: 100%;
  margin-top: 10px;
}

.navbar .nav-link {
  padding: 10px 50px;
  color: #333;
  background-color: red;
}


/* Burger Navigation */

.burger {
  display: none;
}

.burger div {
  width: 25px;
  height: 2px;
  background-color: #333;
  margin: 5px;
  border-radius: 25%;
}

@media (max-width: 813px) {
  .nav-link {
    position: absolute;
    padding: none;
    right: 0px;
    height: 92vh;
    top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
  }
}
<body>
  <header class="navbar">
    <a href="" class="logo"><img src="/img/logoS.png" alt=""></a>

    <nav>
      <ul>
        <a class="nav-link" href="#">Home</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">Contact</a>
      </ul>
    </nav>

    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>

  </header>

</body>

Upvotes: 3

Views: 4902

Answers (4)

Maximillian Lange
Maximillian Lange

Reputation: 19

You can add a little JavaScript.

Menu.style.display = "none";
function ShowHide(x) {
  x.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  if (Menu.style.display === "none") {
    Menu.style.display = "block";
  } else {
    Menu.style.display = "none";
  }
}
  .container {
    display: inline-block;
    cursor: pointer;
  }

  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }

  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }

  .change .bar2 {opacity: 0;}

  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }
<div class="container" onclick="ShowHide(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="Menu" style="width: 150px; background-color: rgb(217, 231, 255); display: none;">
  <h2><a href="#1">Item 1</a></h2>
  <h2><a href="#2">Item 2</a></h2>
  <h2><a href="#3">Item 3</a></h2>
</div>

View on JSFiddle

Upvotes: 2

Mohsin Bilal
Mohsin Bilal

Reputation: 11

Please add flex-direction for your nav and ul

nav, ul {
    display: flex;
    flex-direction: column;
}

Upvotes: 1

Nikhil
Nikhil

Reputation: 3950

This bootstrap code will be complete answer:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Service</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

check:https://jsfiddle.net/sugandhnikhil/9xazvehd/

Upvotes: 1

Shojeesh CP Vattoli
Shojeesh CP Vattoli

Reputation: 56

I've made a few updates to your code. Try this.

<style type="text/css">
    /* Basic */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Acme', sans-serif;
      background: white;
      line-height: 1.6;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }


    /* Navbar */

    .navbar {
      display: flex;
      background: #004C66;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 70px;
      position: fixed;
      padding: 0 30px;
    }

    .navbar .logo img {
      width: 100%;
      margin-top: 10px;
    }

    nav{
      margin-left: auto;
    }

    .navbar .nav-link {
      padding: 10px 50px;
      color: #333;
      background-color: red;
      color: white;
    }


    /* Burger Navigation */

    .burger {
      display: none;
    }

    .burgerContainer{
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .burger div {
      width: 25px;
      height: 2px;
      background-color: #fff;
      margin: 5px;
      border-radius: 25%;
    }

    @media (max-width: 1200px) {
      nav {
        position: fixed;
        padding: 20px;
        right: -100%; /* Hiding the Nav */
        height: calc(100% - 70px); /* Minus header height */
        top: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 270px;
        background: #fff;
        border-left: solid 1px #ddd;
        transition: all 0.4s ease;
      }
      nav.showNav{
        right: 0;
      }
      nav ul{
        width: 100%;
      }
      .navbar .nav-link{
        width: 100%;
        display: block;
        margin: 5px 0;
        text-align: center;
      }
      .burger{
        display: inline-block;
      }
    }
</style>


<header class="navbar">
    <a href="" class="logo">
    </a>
    <nav>
        <ul>
            <a class="nav-link" href="#">Home</a>
            <a class="nav-link" href="#">Services</a>
            <a class="nav-link" href="#">Contact</a>
        </ul>
    </nav>
    <div class='burgerContainer'>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </div>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(".burgerContainer").on("click", function () {
        $("nav").toggleClass("showNav");
    });
</script>

Upvotes: 1

Related Questions