Flexbox Usecase - Navbar

Goal

  • âš¡ Make navbar by using Flexbox

navbar-flexbox-goal

Preparation

Please make flexbox-navbar.html in css-test folder.

Add html code

flexbox-navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<nav>
<a href="#">Logo</a>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button>Sign Up</button>
</nav>
</body>
</html>

Check the current output

html-only-navbar

Add class name

Add class name to add CSS

flexbox-navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<nav class="navbar">
<a href="#">Logo</a>
<ul class="navbar-list">
<li class="navbar-list-item"><a href="#">Features</a></li>
<li class="navbar-list-item"><a href="#">Pricing</a></li>
<li class="navbar-list-item"><a href="#">About</a></li>
<li class="navbar-list-item"><a href="#">Team</a></li>
<li class="navbar-list-item"><a href="#">Contact</a></li>
</ul>
<button>Sign Up</button>
</nav>
</body>
</html>

Add style

Step1 Disable browser default css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* Disable Browser default style */
body {
margin: 0;
}
ul {
margin-top: 0;
margin-bottom: 0;
list-style: none;
padding-left: 0;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#">Logo</a>
<ul class="navbar-list">
<li class="navbar-list-item"><a href="#">Features</a></li>
<li class="navbar-list-item"><a href="#">Pricing</a></li>
<li class="navbar-list-item"><a href="#">About</a></li>
<li class="navbar-list-item"><a href="#">Team</a></li>
<li class="navbar-list-item"><a href="#">Contact</a></li>
</ul>
<button>Sign Up</button>
</nav>
</body>
</html>

Step2 Use Flexbox

To align navbar item, let's use Flexbox!

flexbox-navbar.html
<style>
/* Disable Browser default style */
body {
margin: 0;
}
ul {
margin-top: 0;
margin-bottom: 0;
list-style: none;
padding-left: 0;
}
/* Navbar style */
.navbar {
display: flex;
}
.navbar-list {
display: flex;
}
</style>

Step3 Make navbar cool

<style>
/* Disable Browser default style */
body {
margin: 0;
}
ul {
margin-top: 0;
margin-bottom: 0;
list-style: none;
padding-left: 0;
}
/* Navbar style */
.navbar {
display: flex;
padding: 15px 30px;
background: #d3d3d3;
}
.navbar-list {
display: flex;
margin-left: auto;
}
.navbar-list-item {
margin-right: 15px;
}
</style>

Final Code

flexbox-navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* Disable Browser default style */
body {
margin: 0;
}
ul {
margin-top: 0;
margin-bottom: 0;
list-style: none;
padding-left: 0;
}
/* Navbar style */
.navbar {
display: flex;
padding: 15px 30px;
background: #d3d3d3;
}
.navbar-list {
display: flex;
margin-left: auto;
}
.navbar-list-item {
margin-right: 15px;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#">Logo</a>
<ul class="navbar-list">
<li class="navbar-list-item"><a href="#">Features</a></li>
<li class="navbar-list-item"><a href="#">Pricing</a></li>
<li class="navbar-list-item"><a href="#">About</a></li>
<li class="navbar-list-item"><a href="#">Team</a></li>
<li class="navbar-list-item"><a href="#">Contact</a></li>
</ul>
<button>Sign Up</button>
</nav>
</body>
</html>
Edit this page