JSFiddle - React, Tailwind, and code Playground

Responsive Navigation Menu Using Only CSS

by Jennifer Perrin

HTML

<h1><span>Responsive Navigation Menu</span> Using Only CSS</h1>

<header>
  <section>
    <a href="https://www.linkedin.com/in/sutharmayur" id="logo" target="_blank">Mayur Suthar</a>

    <label for="toggle-1" class="toggle-menu">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </label>
    <input type="checkbox" id="toggle-1">

    <nav>
      <ul>
        <li><a href="#logo"><i class="icon-home"></i>Home</a></li>
        <li><a href="#about"><i class="icon-user"></i>About</a></li>
        <li><a href="#portfolio"><i class="icon-thumbs-up-alt"></i>Portfolio</a></li>
        <li><a href="#services"><i class="icon-gear"></i>Services</a></li>
        <li><a href="#gallery"><i class="icon-picture"></i>Gallery</a></li>
        <li><a href="#contact"><i class="icon-phone"></i>Contact</a></li>
      </ul>
    </nav>
</header>

</section>

<section id="about" class="content">
  <h2>About</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

<section id="portfolio" class="content">
  <h2>Portfolio</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in...

CSS

* {
  text-decoration: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
  outline: none;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans', sans-serif;
}

section {
  width: 100%;
  max-width: 1200px;
  margin: 0px auto;
  display: table;
  position: relative;
}

h1 {
  margin: 0px auto;
  display: table;
  font-size: 26px;
  padding: 40px 0px;
  color: #002e5b;
  text-align: center;
}

h1 span {
  font-weight: 500;
}

header {
  width: 100%;
  display: table;
  background-color: #fde428;
  margin-bottom: 50px;
}

#logo {
  float: left;
  font-size: 24px;
  text-transform: uppercase;
  color: #002e5b;
  font-weight: 600;
  padding: 20px 0px;
}

nav {
  width: auto;
  float: right;
}

nav ul {
  display: table;
  float: right;
}

nav ul li {
  float: left;
}

nav ul li:last-child {
  padding-right: 0px;
}

nav ul li a {
  color: #002e5b;
  font-size: 18px;
  padding: 25px 20px;
  display: inline-block;
  transition: all 0.5s ease 0s;
}

nav ul li a:hover {
  background-color: #002e5b;
  color: #fde428;
  transition: all 0.5s ease 0s;
}

nav ul li a:hover i {
  color: #fde428;
  transition: all 0.5s ease 0s;
}

nav ul li a i {
  padding-right: 10px;
  color: #002e5b;
  transition: all 0.5s ease 0s;
}

.toggle-menu ul {
  display: table;
  width: 25px;
}

.toggle-menu ul li {
  width: 100%;
  height: 3px;
  background-color: #002e5b;
  margin-bottom: 4px;
}

.toggle-menu ul li:last-child {
  margin-bottom: 0px;
}

input[type=checkbox],
label {
  display: none;
}

.content {
  display: table;
  margin-bottom: 60px;
  width: 900px;
}

.content h2 {
  font-size: 18px;
  font-weight: 500;
  color: #002e5b;
  border-bottom: 1px solid #fde428;
  display: table;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.content p {
  font-size: 14px;
  line-height: 22px;
  color: #7c7c7c;
  text-align: justify;
}

footer {
  display: table;
  padding-bottom: 30px;
  width: 100%;
}

.social {
  margin: 0px auto;
  display: table;
  display:...