#7 Nav Bar Challenge {Day 7/7} - Using HTML & CSS Only

Description:-

Hey Codex, today in this blog you’ll learn "How to create a Nav Bar - Using HTML & CSS | Step by Step.

Let's see!

First, try it by following the video tutorial !

This tutorial video can help you to Create a Nav Bar - Using HTML & CSS | Step by Step.

Source code:-

First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

HTML

Create a file with the name of index.html and paste the HTML code in it.

CSS

Now create a file with the name of style.css and paste the CSS code in it.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.1rem;
}

a {
  text-decoration: none;
}

.container {
  width: 90%;
  max-width: 1134px;
  margin: 0 auto;
  padding: 1em 0;
  position: relative;
}

header {
  background: #1A4D2E;
  width: 100%;
  position: sticky;
  top: 0;
}

header a {
  text-decoration: none;
  color: white;
}

header nav ul li a {
  display: block;
  padding: 0.5em 0;
}

header nav ul {
  background: #1A4D2E;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  max-height: 0;
  transition: max-height 0.3s ease-out;
  position: absolute;
  width: 100%;
}

header .menu-icon {
  cursor: pointer;
  display: block;
  position: relative;
  user-select: none;
}

header .menu-icon .nav-icon {
  display: block;
  margin: 2px 0;
  background-color: white;
  width: 18px;
  position: relative;
  height: 2px;
}

header .navigation {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

header nav {
  flex: 1 1 100%;
}

header nav ul {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}

header nav ul .nav-item {
  flex: 1 1 100%;
}

header .menu-btn {
  display: none;
}

header .menu-btn:checked ~ nav ul {
  max-height: 330px;
}

a:hover {
  transition: all .4s ease;
  color: black;
  font-weight: 400;
}

@media (min-width: 980px) {
  header .menu-icon {
    display: none;
  }

header nav ul {
    position: static;
    max-height: none;
  }

header .navigation {
    flex-flow: nowrap;
  }