Responsive Header (Navbar) Using Custom Html Css JavaScript

Suraj (UI/UX Developer)

Jun 2024

HTML

<!DOCTYPE html>
<html>
<head>
<title>Codekarnedo.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="navbar_navbar_custome" id="navbarmenu">
<a href="#"><img src="https://codekarnedo.com/malinLogo.png" height="10" class="logo"></a>
<a href="#" class="active">Home</a>
<a href="#">About Us</a>
<a href="#">Service</a>
<a href="#">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="thisfunction()">
<i class="fa fa-bars"></i>
</a>
<a href="#" class="user">Login</a>
<a href="#" class="user">Register</a>
</div>

<div style="padding-left:16px">
<h1 class="text_center">Create Custom Full Responsive Header (Navbar) With Custome Html Css Js</h1>
<h3 class="text_center blink">Resize this and see browser Window <strong> how it works.</strong></h3>
</div>

<script src="js/js.js"></script>
</body>
</html>

CSS

.navbar_navbar_custome {
overflow: hidden;
background-color: #324856;
}
.navbar_navbar_custome a {
float: left;
display: block;
font-family: cursive;
color: #f2f2f2;
text-align: center;
padding: 12px 22px;
font-weight: 700;
text-decoration: none;
font-size: 17px;
}
.navbar_navbar_custome a:hover {
background-color: #ddd;
color: black;
}
.navbar_navbar_custome a.active {
background-color: #ff7350;
color: white;
}
.navbar_navbar_custome .icon {
display: none;
}
a.user {
float: inline-end;
border-left: 1px solid #000;
}
.text_center{text-align: center;word-wrap: break-word;font-family: cursive;}
.logo{transform: scale(3);min-width: 100px; object-fit: scale-down;}
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation .8s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}

/*start media mobile*/
@media only screen and (max-width: 767px) {
.navbar_navbar_custome a:not(:first-child) {display: none;}
.navbar_navbar_custome a.icon {
float: right;
display: block;
}
.navbar_navbar_custome.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar_navbar_custome.responsive {position: relative;}
.navbar_navbar_custome.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.logo {
transform: scale(3);
padding: 1px 4px;
object-fit: scale-down;
}
/*end mobile media queery*/
}

JavaScript

function thisfunction()
{
var x = document.getElementById("navbarmenu");
if (x.className === "navbar_navbar_custome") { x.className += " responsive"; }
else { x.className = "navbar_navbar_custome"; }
}