Photo by

Markus Spiske on Unsplash

Navbar with flexbox

[

](https://hashnode.com/@Programing-School)

Programming-School

·Jan 12, 2022·2 min read

Subscribe to our newsletter and never miss any upcoming articles

Subscribe

Listen to this article

Your browser does not support the audio element.SPEED1X

Table of contents

• Hello 👋

Hello 👋

Today we will create a responsive navigation bar with flexbox

1. Create Files

Create a new html file for html code
Create a new CSS File for CSS Code or use style tag <style></style> and we but style tag in html file in head tag

1. Html

2. Default Html Tags

There is A Default Html Tags must but it in your html file as follow:

<!DOCTYPE html>
<html>
<head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Navigation bar with Flexbox</title>
</head>
<body>

</body>
</html>

1. Header Tag

There is a Header tag <header></header> we put all header components to form header in the end

<!DOCTYPE html>
<html>
<head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Navigation bar with Flexbox</title>
</head>
<body>
          <header>

          </header>
</body>
</html>

1. But All header components

We will put all header components as logo in the left and some links in the right

<!DOCTYPE html>
<html>
<head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Navigation bar with Flexbox</title>
</head>
<body>
          <header>
                    <h1> Programing-School </h1>
                    <br>
                    <ul>
                            <li><h4>Home</h4></li>
                          <li><h4>About</h4></li>
                          <li><h4>Products</h4></li>
                    </ul>
          </header>
</body>
</html>

1. But All classes and ids

There are classes and ids to style it only:

<!DOCTYPE html>
<html>
<head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Navigation bar with Flexbox</title>
</head>
<body>

    <header class="flex-container">
       <h1 class="logo"> Programing-School </h1>
       <br>
       <ul>
            <li class="hoverli"><h4>Home</h4></li>
          <li class="hoverli"><h4>About</h4></li>
          <li class="hoverli"><h4>Products</h4></li>
       </ul>
     </header>
</body>
</html>

1. Put CSS in the Website

2. Put the flex-container style

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
  height: 70px;
  top: 0;
  margin: 0;
  padding: 0;
}

We change the display display to flex to use flexbox and but the other styles as previous

1. Put Unordered list style

   .flex-container ul {
   list-style: none;
   display: flex;
   margin-top: 3px;
   position: relative;
   flex-direction: row;
   margin-left: 700px;
   }
   

1. Put Unordered list item

   .flex-container > ul li {
   cursor: pointer;
   height: 50px;
   background-color: #f1f1f1;
   width: 75px;
   margin: 10px 20px;
   text-align: center;
   font-size:  15px;
   flex-direction: row;
   float: left;
   transition: 1s;
   list-style: none;
   }
   

1. Put logo style

   .logo {
    margin: 20px;
    color: #f2f2f2;
    font-size: 25px;
    max-width: 100%;
    height: auto;
    flex-direction: row;
   }
   

1. Put All Hovers

   .hoverli:hover {
   background-color: burlywood;
   }
   

1. Put Code who make the navbar responsive (Media Queries)

   @media (max-width: 668px) {
   .flex-container ul {
      margin-left: 0px;
   }
   }
   

Want to learn html and CSS Follow the previous links

Like

Share this