Responsive Navigation Menu Bar using HTML & CSS

Hello developers, today in this blog you'll learn how to make a Responsive Navigation Menu Bar using HTML & CSS.

The Menu Bar or Navigation Bar (Navbar) is vital for any kind of website. Many websites have a responsive navbar. The Navigation menu will be a horizontal bar where the logo and a few hyperlinks exist. The navigation bar aims to directly redirect into the particular page by clicking on the hyperlinks as you need. The navigation bar should perfectly fit all screen devices.

On the top side, there is one horizontal bar, where you'll be able to see the logo and a few hyperlinks. On the right side, there is a logo, and on the left side of the logo, there are some hyperlinks.

When you see this web page in mobile view, the top side horizontal hyperlink bar will come to the bottom side whereas the logo occupies the top side full width of the mobile screen.

The source code for making the Responsive Navigation Menu Bar is given below, if you want the source code of this program, you can copy it. You can use this Responsive Navigation Menu Bar with your creativity and can take this to the next level.

Responsive Navigation Menu Bar [Source Code]

To make this website, you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you've to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title> Learning robo || mobile responsive nav bar </title> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <nav class='large'> <div class="container"> <h5 class="logo">Learning Robo</h5> <ul class="top"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <nav class="mobile"> <ul class="bottom"> <li><a href="#"><i class="fa fa-home"></i></a> <span>Home</span></li> <li><a href="#"><i class="fa fa-address-card"></i></a> <span>About</span></li> <li><a href="#"><i class="fa fa-book"></i></a> <span>Projects</span></li> <li><a href="#"><i class="fa fa-phone"></i></a> <span>Contact</span></li> </ul> </nav> <main> <div class="container"> <h1>Decrease Screen Size</h1> </div> </main> </body> </html>
CSS provides style to an HTML page. To make the page attractive and page responsive create a CSS file with the name style.css and remember that you've to create a file with a .css extension.
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'Montserrat', sans-serif;
  }
  
  body {
    width: 100%;
    min-height: 100vh;
    background: #00C9A7;
  }
  .container {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
  }
  nav.large {
    width: 100%;
    height: 60px;
    background: #12192c;
border-radius:0 0 40px 40px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.logo{
          color: #fff;
          font-size: 1em;
          text-align: center;
        }
             
  nav.mobile {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #12192c;
    padding: 0 30px;
    border-radius:40px 40px 0 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
ul {
      list-style: none;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
      width: 100%;}
 li {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: .7rem;}
 a {
          color: #fff;
          font-size:1.2rem;
          text-decoration: none;
          cursor: pointer;
        }
span {
          color: #fff;
          font-size: inherit;
        }
 
  @media (max-width: 772px){
    nav.mobile{
      display: block;
    }
    ul.top {
      display: none;
    }
  }
  
  main {
    height: calc(100vh - 70px);
}
.container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
 h1 {
        font-size: 3rem;
        text-align: center;
      }
    
 
  




  

In the Mobile view of this page, you can see icons with the hyperlinks provided.

We hope you would like this Responsive Navigation Menu Bar using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Navigation Menu Bar using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome