Skip to main content

Create responsive NavBar using HTML and CSS (No JavaSccript) - scoobcode

Here in this blog, we will learn how to create a responsive navbar in just some line of HTML and CSS code. No need for javascript for the design. 

Full tutorial video: https://youtu.be/JmcN_f7aKd8

Output

responsive_navbar
Desktop View

Mobile View

Source code

👉 HTML

<!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">
    <title>Responsive NavBar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <b class="logo">Scoobcode</b>
        <input type="checkbox" name="" id="tapmenu">
        <label for="tapmenu" class="tapnav">
            <span></span>
            <span></span>
            <span></span>
        </label>
        <nav class="navmenu">
            <a href="#" class="menu">Home</a>
            <a href="#" class="menu">About</a>
            <a href="#" class="menu">Contact</a>
        </nav>
    </header>
    <section>
        <h1>This is a Responsive NavBar</h1>
    </section>
</body>
</html>

👉 CSS

*{
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    text-decoration:none ;
}

header{
    height: 15vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: black;
}
.logo{
    font-size: 35px;
    color: white;
}
.menu{
    color: rgb(255, 255, 255);
    font-size: 25px;
    padding: 10px 20px;
    border-radius: 5px;
}
.menu:hover{
    background-color: turquoise;
    color: black;
}
.tapnav{
    display: none;
}
span{
    display: flex;
    height: 3px;
    width: 20px;
    background-color: white;
    margin: 5px;
}
#tapmenu{
    display: none;
}

section{
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* responsive menu  */

@media (max-width: 900px){
    .navmenu{
        position: fixed;
        height: 100vh;
        width: 100%;
        background-color: black;
        top: 15vh;
        left: -100%;
        transition: all 0.3s ease;
    }
    .menu{
        display: flex;
        justify-content: center;
        line-height: 60px;
    }   
    .menu:hover{
        background-color: transparent;
        color: turquoise;
    }
    .tapnav{
        display: block;
    }

    #tapmenu:checked ~ .navmenu{
        left: 0;
    }
}

You can support me to like this blog and share it with your programmer friends. Go to my youtube channel scoobcode and watch the full tutorial video.

Comments

Post a Comment

Popular posts from this blog

Create social media icon hover effect using HTML and CSS - scoobcode

Here in this blog, we going to learn how to create social media icon hover effect using only HTML & CSS. Make social media icons more attractive. Here I use Fontawesome for social media icons. Full video tutorial:  https://youtu.be/Ks2AHt3e_BM Fontawesome:  https://fontawesome.com Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Source code 👉 HTML <!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="style.css">     <script src="https://kit.fontawesome.com/e326c3f2a0.js" crossorigin="anonymous"></script>     <title>Hover effect</title> </head> <body>          <div class=&quo
Post a Comment
Read more

Make profile card design with hover effect using HTML and CSS - scoobcode

This blog will show you how to make a profile card design with a hover effect using HTML and CSS. Profile card is used for a short introduction for a specific person. Full video tutorial:  https://youtu.be/9XXMJAuquCI Resources:  https://github.com/scoobcode/profile_card_design.git Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Source code 👉  HTML <!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">     <title>Info-card</title>     <link rel="stylesheet" href="style.css">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUB
Post a Comment
Read more

Create animate tour website using HTML and CSS - scoobcode

Here in this blog, we will learn how to create an animated tour website in just some line of HTML and CSS code. Also, I will give you the source code copy it, and make your own design. We will see Flexbox, Animations, Transitions property, and many more. Live preview website: https://bit.ly/3yNMIwm Full tutorial video:  https://youtu.be/_E07NfghI_c Output Source code 👉  HTML <!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">     <title>India Tourism</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <header>         <nav>             <div class="logo">                 <b>Indian
Post a Comment
Read more