Responsive mobile navigation bar html css source code

Responsive mobile navigation bar html css source code

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">
    <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" />
    <div class="bottom-bar">
      <ion-icon name="home-outline" class="icon" onclick="change(this)">
      <ion-icon name="folder-outline" class="icon" onclick="change(this)">
      <ion-icon name="add-circle-outline" class="icon active" onclick="change(this)">
      <ion-icon name="person-outline" class="icon" onclick="change(this)">
      <ion-icon name="image-outline" class="icon" onclick="change(this)">
    function change(item){
        const buttons = document.querySelectorAll('ion-icon');

    margin: 0;
    background-color: #101011;
    background-color: #e7edf9;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20em;
    max-width: 30em;
    border-radius: 20px 20px 0 0;
    font-size: 1.5em;
    padding: .5em;
    margin: .5em;
    margin-top: 0;
    transition: .5s ease-in-out;
    border-radius: 100%;
    border: 7px solid #eee;
    transform: scale(1.25) translateY(-1em);
    background: linear-gradient(135deg, rgb(17, 16, 40),#250c1a);
    border: 7px solid #9a9ac3;
    color: white;

Post a Comment

Previous Post Next Post

Contact Form