Faraz Faraz - 16 days ago 7
CSS Question

How to make a toggleable navbar in pure CSS?

I'm trying to make a navigation bar with pure HTML and CSS which doesn't require any JavaScript to open and close.

I'm having an issue with the navigation bar remaining open. When I set

display: none
or
visibility: hidden
to get desired functionality, the hyperlink doesn't function anymore.

http://codepen.io/anon/pen/dOMYEj

Is this possible? Thanks!

Answer

when you use display:flex ,position:absolute ,relative and fixed does not behave as expected.check this link

Modified markup and css a bit .please check the following snippet

* {
  font-family: sans-serif;
}
nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: white;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div {
  height: 5vh;
  width: 10vw;
  position: fixed;
  top: 0;
  padding: 3px;
  right: 0;
}
.icon {
  display: inline;
}
nav > h1 {
  font-family: cursive;
  font-size: 1.2rem;
  padding-left: 10px;
  color: blue;
}
nav li {
  list-style: none;
  display: inline;
  font-size: 1.2rem;
  padding: 10px;
  cursor: pointer;
}
nav a {
  color: darkgray;
  text-decoration: none;
}
nav a:hover {
  color: black;
}
nav a:active {
  color: blue;
}
nav li:first-child * {
  color: blue;
}
nav ul {
  width: 50vw;
}
nav h1,
nav ul {
  font-size: 2rem;
}
nav > input {
  display: none;
}
nav > label {
  display: none;
}
input {
  display: none;
}
section {
  font-size: 2rem;
  padding: 1vh 5vh 0 5vh;
}
section#top {
  margin-top: 5.5vh;
}
@media (max-width: 5000px) {
  /* changed to 5000 so it is always collapsed */
  nav {
    height: 6vh;
    text-align: center;
    justify-content: space-between;
  }
  nav li {
    display: block;
    border: solid 1px blue;
    margin: 0 auto;
  }
  #links {
    visibility: hidden;
  }
  section#top {
    margin-top: 10vh;
  }
  input:checked + nav ul#links {
    visibility: visible;
    position: absolute;
    right: 30px;
  }
  input:not:checked +nav ul#links {
    visibility: hidden;
  }
  nav {
    color: blue;
  }
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="taco.css">
  <title>Test Page</title>
</head>
<input type='checkbox' id='one'>

<nav class="toggleable" tabindex="1">
  <h1>Test Page</h1>
  <div>
    <label for="one">☰</label>
    <ul id="links">
      <li><a href="#top">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#menu">Menu</a>
      </li>
      <li><a href="#hours">Hours</a>
      </li>
      <li><a href="#directions">Directions</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<main>
  <section id="top">
    <h1>Welcome</h1> awefore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia
    reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
    voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="about">
    <h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="menu">
    <h1>Menu</h1> Lorem ipsum dolor styktyktyktyking elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="hours">
    <h1>Hours</h1> Lorem ipsum dolor sit rtyr657456ydfghfvgyjktyuicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="directions">
    <h1>Directions</h1> Lorem ipsuaw4yae4yah34rtaw3789t. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="contact">
    <h1>Contact</h1> Lorem ipsum dolor 3456345789ru8ghiuretur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
</main>

</html>

Hope it helps

Comments