Press "Enter" to skip to content

Responsive Navbar Create in CSS Flexbox | ftwnav

Responsive Navbar with Flexbox HTML CSS Javascript is the navigation bar built into the CSS Flexbox. Fast site navigation automatically collapses in the hamburger side menu (off-canvas menu) in mobile view.

hamburger menu css responsive, flexbox responsive navbar, responsive navigation menu css, mobile menu css, mobile navigation menu css, css only mobile menu

What’s Include?

  • Hamburger Menu if you resize to mobile version
  • Close Button after opening a menu in the hamburger menu

Browser Support

  • Chrome Latest Version
  • Edge Latest Version
  • Firefox Latest Version

How to make use of it:

1. Add your website brand, menu items, and hamburger toggle button to the nav.

<nav>
  <div class="logo">
    <h2>Fatihwin</h2>
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="menu-bars">
    <input type="checkbox">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>

2. The essential CSS/CSS3 styles for the positioning nav.

/* Core */
nav{
  display:flex;
  background-color: rgb(126, 43, 204);
  justify-content: space-around;
  padding:20px 0;
  color:rgb(255, 254, 254);
  align-items: center;
}

nav.logo{
  letter-spacing: 3px;
}

nav ul{
  display:flex;
  list-style: none;
  width:40%;
  justify-content: space-between;
}

nav ul li a {
  color:rgb(255, 254, 254);
  text-decoration: none;
  font-size: 1em;
}

nav ul.slide{
  transform: translateX(0);
}

/* Hamburger */
.menu-bars{
  display:none;
  flex-direction: column;
  height:20px;
  justify-content: space-between;
  position:relative;
}

.menu-bars input{
  position: absolute;
  width:40px;
  height:28px;
  left:-5px;
  top:-3px;
  opacity: 0;
  cursor:pointer;
  z-index: 2;
}

.menu-bars span{
  display:block;
  width:28px;
  height:3px;
  background-color:rgb(255, 254, 254);
  border-radius: 3px;
  transition: all 0.3s;
}

.menu-bars span:nth-child(2){
  transform-origin: 0 0 ;
}

.menu-bars span:nth-child(4){
  transform-origin: 0 100% ;
}

.menu-bars input:checked ~ span:nth-child(2){
  background-color: white;
  transform: rotate(45deg) translate(-1px, -1px);
}

.menu-bars input:checked ~ span:nth-child(4){
  background-color: white;
  transform: rotate(-45deg) translate(-1px,0);
}

.menu-bars input:checked ~ span:nth-child(3){
  opacity: 0;
  transform: scale(0);
}

/* Mobile Menu */
@media only screen and (max-width: 768px){
  nav ul{
    width:50%;
  }
}

@media only screen and (max-width: 576px){
  .menu-bars{
    display:flex;
  }

  nav ul{
    position:absolute;
    right:0;
    top:0;
    width:80%;
    height:100vh;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    background-color: rgb(126, 43, 204);
    z-index: -1;
    transform: translateX(100%);
    transition: all 1s;
  }
}

3. Enable the hamburger button to toggle the mobile menu.

const menuToggle= document.querySelector(".menu-bars");
const nav = document.querySelector("nav ul");
menuToggle.addEventListener("click", () => {
  nav.classList.toggle("slide");
});

Responsive Mobile Menu, Responsive-Navbar-with-Flexbox Plugin/Github, responsive navigation menu css free download, flexbox navbar


See Demo And Download

Official Website(fatihwin): Click Here

This superior jQuery/javascript plugin is developed by fatihwin. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *