Build a Responsive Navigation Bar using CSS Flexbox. In this article, we will build a fully responsive navigation bar from scratch using CSS flexbox. So, I will consider you have a basic understanding of HTML and CSS that is you should know the basic HTML tags and how to link the CSS files to the HTML file.
Read Also: How to build a responsive mega menu
Build a Responsive Navigation Bar using CSS Flexbox.
Flexbox is a CSS layout style that provides you to efficiently align elements responsively. You don’t need to install any dominions or include a link to a CDN to start using it. It’s naturally pretty easy to pick up and fun to play around with. Flexbox allows for flexible layouts, but only in a single dimension.
Read Also: How to Create a responsive navbar with icons
It is excellent when you want to align a few items to a certain way very speedily and have them be responsive to different browser sizes. Flexbox is the perfect tool for building responsive website navigation. So in this post, I’ve added a responsive Flexbox Navigation Menu Example for influence to build a usable and extensible navigation menu system that works for a number of situations.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<nav class="softnav">
<label class="softnav-toggle" id="js-softnav-toggle" for="softcehck">
<i class="fa fa-bars"></i></label>
<a href="#" class="logo">Your Brand</a>
<input type="checkbox" id="softcehck"></input>
<ul class="main-nav" id="js-menu"><li>
<a href="#" class="soft-links">Home</a>
</li><li>
<a href="#" class="soft-links">Services</a>
</li><li>
<a href="#" class="soft-links">About</a>
</li><li>
<a href="#" class="soft-links">Contact</a>
</li><li>
<a href="#" class="soft-links">Blog</a>
</li></ul></nav>
<style>
* {box-sizing: border-box;padding: 0;
margin: 0; font-family: Roboto, Helvetica, Arial, sans-serif;}
.softnav {font-size: 20px;background: rgb(87,23,171);
background: linear-gradient(90deg, rgba(87,23,171,1) 0%, rgba(246,0,255,1) 100%);
border: 1px solid rgba(0, 0, 0, 0.2);padding-bottom: 10px;}
.main-nav {list-style-type: none;display: none;}
.soft-links,.logo {text-decoration: none;color: #fff;}
.main-nav li {text-align: center;margin: 15px auto;}
.logo {display: inline-block;font-size: 22px;
margin-top: 10px;margin-left: 20px;}
.softnav-toggle {position: absolute;top: 10px;right: 20px;
cursor: pointer;color: rgba(255, 255, 255, 0.8);
font-size: 24px;}
#softcehck {display: none;}
#softcehck:checked + ul.main-nav {display: block;}
@media screen and (min-width: 768px) {
.softnav {display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}#softcehck:checked + ul.main-nav {
display: flex;
}.main-nav {display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
} .main-nav li {margin: 0; }
.soft-links {margin-left: 40px; }
.logo {margin-top: 0; }
.softnav-toggle {
display: none; }
.logo:hover,.soft-links:hover {
color: rgba(255, 255, 255, 1);}}
</style>Read Also: How to create a responsive sticky navbar
Well, now we’ve to build responsive navigation with the help of HTML and CSS flexbox. This navigation menu is responsive and has a toggle system for mobile and tablet devices. So, let me know in the comment section how this article was helpful.