Mohammad Farhan's blog

Sleek Navigation Bar Design in HTML, CSS, and JavaScript

Modern style responsive navigation bar with HTML, CSS, JavaScript.

Mohammad Farhan's photo
Mohammad Farhan
·

2 min read

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
    <!--Remix Icon CDN-->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css"><!--Main Css file-->
    <link rel="stylesheet" href="responsive.css"><!--Mobile Responsive--> 
</head>
<body>
    <nav id="navbar">
    <ul class="menu">
    <li class="menu-lists listAbout"><a href="#about">About</a></li>
    <li class="menu-lists listServices" ><a href="#services">Services </a></li>
    <li class="menu-lists listHire"><div class="contact"><a href="#contact">Hire Me</a></div></li>
    </ul>

    </nav>

    <div class="navbarWrapper"><i class="ri-menu-4-line"></i></div>
    <div class="close"><i class="ri-close-fill"></i></div>
<script src = "main.js"></script>
</body>
</html>

Main CSS File "style.css".

*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
nav#navbar{
width:50%;
display:none;
position:relative;
left:5rem;
z-index:20;
text-align:center;
}
nav ul{
display:flex;
list-style: none;
width:70%;
padding:10px;
background-color: #111;
border-radius: 100px;
justify-content: center;
align-items:center;
position:relative;
text-align:center;
}
nav ul li{
width:100%;
text-align:center;
}
nav ul li a{
cursor:pointer;
position: relative;
color:#fff;
text-decoration: none;
font-size:20px;
}
div.navbarWrapper i{
cursor:pointer;
margin-left:2rem;
position:relative;
width:50px;
height:50px;
font-size:33px;
color:#333;
border-radius:50%;
background-color:mediumspringgreen;
padding:4px;
}
div.close{
display: none;
}
div.close i{
cursor:pointer;
margin-left:2rem;
position:relative;
width:50px;
height:50px;
font-size:33px;
border-radius:50%;
color:#333;
background-color:mediumspringgreen;
padding:4px;         
}

For Mobile View (responsive.css)

/*Mobile 425px*/
@media (max-width:425px){
nav#navbar{
top:12.4rem;
left:9.3rem;
transform:rotate(90deg);
}
nav#navbar ul{
width:200px;
}

nav#navbar ul{
padding:4px;
}
nav ul li a{
font-size:20px;
}
div.navbarWrapper,div.close{
margin-top:10px;
}
div.navbarWrapper i{
padding:4px;
font-size:20px;
}
div.close i{
padding:4px;
font-size:20px;
}

/*Mobile 375px*/
@media (max-width:375px){
nav#navbar{
top:11.8rem;
left:8.71rem;
transform:rotate(90deg);
}
nav#navbar ul{    
width:200px;
}
nav ul li a{
font-size:18px;
}
div.navbarWrapper,div.close{
margin-top:10px;
}
div.navbarWrapper i{
padding:4px;
font-size:20px;
}
div.close i{
padding:4px;
font-size:20px;
}

}

JavaScript (main.js)

const menu = document.querySelector(".navbarWrapper");
const navbar = document.querySelector("nav#navbar");
const close = document.querySelector(".close");
menu.addEventListener("click", function () {
  navbar.style.display = "block";
  navbar.style.bottom = "-10px";
  navbar.style.transition = "bottom .3s ease";
  menu.style.display = "none";
  close.style.display = "block";
});

close.addEventListener("click", function () {
  close.style.display = "none";
  navbar.style.display = "none";
  menu.style.display = "block";
});

const listAbout = document.querySelector(".listAbout");
const listServices = document.querySelector(".listServices");
const listHire = document.querySelector(".listHire");
function viewport() {
  if (screen.width < 426 || screen.width < 375 || screen.width < 320) {
    listHire.innerHTML = `<a href="#contact"><i class="ri-suitcase-fill"></i></a>`;
    listServices.innerHTML = `<a href="#services"><i class="ri-service-line"></i></a>`;
    listAbout.innerHTML = `<a href="#about"><i class="ri-question-fill"></i></a>`;

    listHire.style.color = "#fff";
    listServices.style.color = "#fff";
    listAbout.style.color = "#fff";

    listHire.style.fontSize = "19px";
    listServices.style.fontSize = "19px";
    listAbout.style.fontSize = "19px";

    listHire.style.transform = "rotate(-90deg)";
    listServices.style.transform = "rotate(-90deg)";
    listAbout.style.transform = "rotate(-90deg)";
  }
}
viewport();

So, here it is. Tell me how is it and also comment to me if any problem occurs while applying it.

Thanks for reading.

HTML5CSS3JavaScriptUI Design