Today's blog post will teach you how to create a responsive mobile navigation bar using HTML & CSS only. I previously wrote a blog post to create a Responsive modern login form using html css. I'll be creating a pure CSS Responsive Navigation bar on this blog.
A mobile navigation bar that is responsive is a type of user interface element that can adjust to the various screen sizes of mobile devices. The website can be simply navigated by visitors on mobile devices because to its HTML and CSS design. The navigation bar is made with HTML and CSS code and is responsive, meaning it changes size depending on the screen.
Responsive mobile navigation bar html css source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bottom Navigation Bar - Bijan's Blogs</title>
<link rel="stylesheet" href="style.css" />
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
</head>
<body>
<div class="bottom-bar">
<ion-icon name="home-outline" class="icon" onclick="change(this)">
</ion-icon>
<ion-icon name="folder-outline" class="icon" onclick="change(this)">
</ion-icon>
<ion-icon name="add-circle-outline" class="icon active" onclick="change(this)">
</ion-icon>
<ion-icon name="person-outline" class="icon" onclick="change(this)">
</ion-icon>
<ion-icon name="image-outline" class="icon" onclick="change(this)">
</ion-icon>
</div>
</body>
</html>
<script>
function change(item){
const buttons = document.querySelectorAll('ion-icon');
buttons.forEach(function(obj){
obj.classList.remove("active");
});
item.classList.add("active");
}
</script>
body{
margin: 0;
background-color: #101011;
}
.bottom-bar{
background-color: #e7edf9;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20em;
max-width: 30em;
border-radius: 20px 20px 0 0;
}
.icon{
font-size: 1.5em;
padding: .5em;
margin: .5em;
margin-top: 0;
transition: .5s ease-in-out;
border-radius: 100%;
border: 7px solid #eee;
}
.active{
transform: scale(1.25) translateY(-1em);
background: linear-gradient(135deg, rgb(17, 16, 40),#250c1a);
border: 7px solid #9a9ac3;
color: white;
}