Modern websites must have a navigation bar that is clear and responsive. FlexBox CSS is one of the most effective and adaptable ways to create one. In this lesson, we’ll examine some of the greatest CSS flexbox examples while demonstrating how to use Flexbox to create a responsive navigation bar step-by-step.
Why Use FlexBox?
The CSS layout module FlexBox, which stands for Flexible Box Layout, is made to effectively align items and dynamically distribute space, even when the screen size changes. FlexBox CSS streamlines and simplifies the process of creating a full-width navbar or a small mobile menu.
Step-by-Step CSS Flex Tutorial for a Responsive Navbar
<!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>
body{
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
padding: 20px 60px;
background-color: rgb(10, 10, 121);
color: white;
font-family: sans-serif;
}
.logo{
font-size: 2rem;
font-weight: 700;
}
.item{
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.btn{
background-color: rgb(2, 193, 240);
color: rgb(255, 255, 255);
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
Koben
</div>
<div class="item">
<div>Home</div>
<div>About</div>
<div>Services</div>
<div>Contact</div>
<div><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="25" viewBox="0,0,256,256">
<g fill="#ffffff" fill-rule="nonzero" stroke="3px" stroke-width="5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M21,3c-9.37891,0 -17,7.62109 -17,17c0,9.37891 7.62109,17 17,17c3.71094,0 7.14063,-1.19531 9.9375,-3.21875l13.15625,13.125l2.8125,-2.8125l-13,-13.03125c2.55469,-2.97656 4.09375,-6.83984 4.09375,-11.0625c0,-9.37891 -7.62109,-17 -17,-17zM21,5c8.29688,0 15,6.70313 15,15c0,8.29688 -6.70312,15 -15,15c-8.29687,0 -15,-6.70312 -15,-15c0,-8.29687 6.70313,-15 15,-15z"></path></g></g>
</svg></div>
</div>
<div class="btn">
<div>Get Started</div>
</div>
</div>
</body>
</html>