Create A Full Responsive Navigation Menu In HTML & CSS

Create A Full Responsive Navigation Menu In HTML & CSS

Share It With Your Firends:

On a website, a navigation menu isΒ an organized list of links to other web pages, usually internal pages. Navigation menus appear most commonly in page headers or sidebars across a website, allowing visitors to quickly access the most useful pages.

By responsive menus, we mean quite simplyΒ navigation menus whose presentation or behavior is altered on different devices and screen widths. There are various approaches to achieving this, whether by using CSS or other languages such as PHP. In this article, we’ll look at what can be done with CSS media queries.

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>navbar</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.min.css">
</head>
<body>

    <nav>

        <input type="checkbox" id="check">
        <label for="check" class="chkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <div class="logo">
            <h1>LOGO</h1>
        </div>
        <ul>
            <li><a href="#" class="active">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">blogs</a></li>
            <li><a href="#">feedback</a></li>
        </ul>
    </nav>
    
    <div class="content">
        <h1>Responsive navbar</h1>
        <p>create full responsive navbar in html & css</p>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #fff;
    padding: 0 80px;
    line-height: 75px;
}

nav .logo{
    float: left;
}

nav .logo h1{
    font-size: 40px;
    letter-spacing: 5px;
    font-weight: bold;
    color: #010141;
}

nav ul {
    float: right;
}

nav ul li{
    list-style: none;
    display: inline-block;
}

nav ul li a{
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    padding: 0 20px;
    color: #010141;
    cursor: pointer;
}

nav .active{
    color: #13138b;
}

.content{
    background-color: #010141;
    color: #fff;
    height: 100vh;
    width: 100%;
    padding: 15%;
    text-align: center;
}

.content h1{
    font-size: 60px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.content p{
    top: 20px;
    letter-spacing: 4px;
    font-size: 30px;
}

.chkbtn{
    color: #010141;
    font-size: 25px;
    cursor: pointer;
    float: right;
    display: none;
}

#check{
    display: none;
}

@media screen and (max-width: 1000px){

    nav{
        padding: 0 50px;
    }

    .chkbtn{
        display: block;
    }

    nav .logo h1{
        font-size: 30px;
    }

    nav ul{
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgb(4, 4, 40);
        top: 75px;
        left: -100%;
        text-align: center;
        transition: 0.5s ease;
    }

    nav ul li{
        display: block;
        margin: 60px 0;
        line-height: 20px;
    }

    nav ul li a{
        color: #fff;
    }
    
    #check:checked ~ ul{
        left: 0;
    }
}

Share It With Your Friends

1 Comment

Leave a Reply

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python
DIY AI Voice Assistant In Python

September 8, 2023

Build your own AI assistant with Python! Learn to recognize voice commands, generate responses, and more. Create your virtual companion…

share it

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python

Additional Content

CodeWithAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus.

Products

Automated Chatbot

Data Security

Virtual Reality

Communication

Support

Services

FAQ's

Privacy Policy

Terms & Condition

Team

Contact Us

Company

About Us

Services

Features

Our Pricing

Latest News

Β© 2023 Codewitham