CODEWITHSUNDEEP
htmlcsshamburger-menu
GREY REX
GREY REX

Reputation: 3

Is there missing code for the hamburger btn?

I've been trying to make a checkbtn without JS but my code seems not to work. I still don't know where am failing or if the code is outdated maybe. Down there is the code and styling. The negative margin (-100%) is not working, I don't know if am doing this the right way actually because its my first time to do it.

.navbar .checkbtn {
  display: block;
}

.header .navbar ul {
  height: 20em;
  width: 100%;
  background: darkgreen;
  margin-top: 4.2em;
  text-align: center;
  right: -100%;
  transition: all .5s;
}

#check:checked~ul {
  right: 0;
}

.header .navbar ul li {
  display: block;
}
<div class="header">

    <div class="logo"><a href="#Index.html"><h3>Code</h3></a>
    </div>
<div class="navbar">
  <input type="checkbox" id="check">
  <label for="check" class="checkbtn">&#9776;</label>

  <ul>
    <li><a href="#Index.html">Code</a></li>
    <li><a href="#About-us.html">code</a></li>
    <li><a href="#Coffee.html">code</a></li>
    <li><a href="#Farmers.html">code</a></li>
    <li><a href="#Contacts.html">code</a></li>
  </ul>
</div>
</div>

Upvotes: 0

Views: 60

Answers (1)

Jared
Jared

Reputation: 1374

Your .navbar ul will ignore right: -100% coz it has a static positioning. Change it to any non-static value - relative or absolute for example.

Upvotes: 1

Related Questions