Responsive Navigation Menu Bar Using HTML & CSS

Published by codingmaster on

Hello Friends, today in this blog you’ll learn how to create Responsive Navigation Menu Bar Using Only HTML & CSS3.

Responsive Navigation Menu Bar is very important for our website. Even Responsiveness is very important part or feature of our website. If you want to become a good Web Developer then you’ve must learn about Responsive Websites. It’s very main part of Frontend Development.

Video Tutorial of Responsive Navigation Menu Bar Using Only HTML & CSS

In the video, you’ve seen Responsive Navigation Menu Using HTML & CSS. It’s very very simple after watching our tutorial you guys can easily create Responsive Menu Bars for your website & make your website more attractive.

First i’ve simply create a navigation bar using simple HTML code & give some styling using basic CSS code after this to make responsive i’ve written Media Queries. Simply create a Toggle bar at a specific responsive break point using “max-width” property. So when you minimize the screen, after a specific break point or screen dimension the menu bar changes to toggle bar and it’s very simple…you can see in video tutorial. So after this i’ve create the menu bar again ( horizontally ) for Mobile Screen and add property ” display: none ” so on minimize the screen size the menu bar changes to toggle bar & the horizontal menu bar is hidden..now at last i’ve just write CSS code so when i click on the toggle bar the menu bar displays.

So, enjoy the tutorial & learn something new today 🙂

Responsive Navigation Menu Bar [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Responsive Navigation Menu</title>
</head>
<body>
   <nav>
       <input type="checkbox" id="check">
       <label for="check" class="togglebtn">
           <i class="fa fa-bars"></i>
       </label>
       <label class="logo">NavBar</label>
       <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Services</a></li>
           <li><a href="#">Portfolio</a></li>
           <li><a href="#">Contact</a></li>
       </ul>
   </nav>

   <section></section>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
} 
body {
    font-family: 'Segoe UI',sans-serif;
}
nav {
    background: crimson;
    height: 80px;
    width: 100%;
}
label.logo {
    color: #fff;
    font-size: 35px;
    line-height: 80px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0 100px;
}
nav ul {
    float: right;
    margin-right: 50px;
}
nav ul li {
    display: inline-block;
    line-height: 80px;
    margin: 0 8px;
}
nav ul li a {
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
}
nav ul li a:hover {
    color: #222;
    transition: .3s;
}
.togglebtn {
    color: #fff;
    float: right;
    line-height: 80px;
    font-size: 30px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check {
    display: none;
}

@media (max-width: 952px) {
    label.logo {
        font-size: 30px;
        padding-left: 50px;
    }
    nav ul li a {
        font-size: 19px;
    }
}

@media (max-width: 858px) {
    .togglebtn {
        display: block;
    }
    ul {
        position: fixed;
        height: 100vh;
        width: 100%;
        background: #222;
        top: 80px;
        text-align: center;
        left: -100%;
        transition: all .5s;
    }
    nav ul li {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }
    nav ul li a {
        font-size: 25px;
    }
    nav ul li a:hover {
        color: crimson;
    }
    #check:checked ~ ul {
        left: 0;
    }
}

section {
    background: url(bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: calc(100vh - 80px);
}
DOWNLOAD SOURCE CODE FILES
codingmaster
Latest posts by codingmaster (see all)
Categories: CSS Navigation Bars
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

CSS Navigation Bars

Responsive Drop Down Menu Bar Using HTML & CSS

Hello Friends, today in this blog you’ll learn how to create Responsive Drop Down Menu Bar Using Only HTML & CSS3. So in the last blog we created a Responsive Navigation Menu Bar Using Only Read more…