# Navbar with flexbox
Photo by
[Markus Spiske](https://unsplash.com/@markusspiske?utm_source=Hashnode&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=Hashnode&utm_medium=referral)
Navbar with flexbox
===================
[
](https://hashnode.com/@Programing-School)
[Programming-School](https://hashnode.com/@Programing-School)
·[Jan 12, 2022](https://programming-school.hashnode.dev/navbar-with-flexbox)·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 👋](https://programming-school.hashnode.dev/#heading-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 `` 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:
Navigation bar with Flexbox
1. Header Tag
There is a Header tag `` we put all header components to form header in the end
Navigation bar with Flexbox
1. But All header components
We will put all header components as logo in the left and some links in the right
Navigation bar with Flexbox
1. But All classes and ids
There are classes and ids to style it only:
Navigation bar with Flexbox
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;
}
2. 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;
}
3. Put logo style
.logo {
margin: 20px;
color: #f2f2f2;
font-size: 25px;
max-width: 100%;
height: auto;
flex-direction: row;
}
4. Put All Hovers
.hoverli:hover {
background-color: burlywood;
}
5. Put Code who make the navbar responsive (Media Queries)
@media (max-width: 668px) {
.flex-container ul {
margin-left: 0px;
}
}
Want to learn [html](https://programing-school.hashnode.dev/learn-html-create-your-first-html-web-page) and [CSS](https://programing-school.hashnode.dev/learn-css-and-its-syntax) Follow the previous links
Like
[](https://programming-school.hashnode.dev/#write-comment)
[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Fnavbar-with-flexbox&text=Navbar%20with%20flexbox%0D%0A%7B%20by%20%40Programing_Pro%20%7D%20from%20%40hashnode%0D%0A)
Share this[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Fnavbar-with-flexbox&text=%20%40Programing-School)[](http://www.reddit.com/submit?title=Navbar%20with%20flexbox&selftext=true&text=%20https%3A%2F%2Fprogramming-school.hashnode.dev%2Fnavbar-with-flexbox)