How to Make Responsive Menu With HTML, CSS

Hi Everyone

NOW I will represent how to make Responsive Menu

*** ![1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519225337/aunvwbrr6nqjhwdunfce.png) ***

*** ![2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519225363/e3my4cezcmqvfu381tav.png) ***

*** ![3.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519225385/ar8cagntusjnca6k8myt.png) ***

*** Code HTML *** ``` WELCOME

☰

Home About Services Work

``` ***

*** Code CSS *** ``` body { width: 100%; height: 100%; margin: 0; font-family: "helvetica neue", sans-serif; }

header {
background: #35424a;
height: 80px;
border-bottom: 5px solid #e8491d;
}

.nav {
text-align: right;
line-height: 80px;
}

.menu {
margin: 0 40px 0 0;
}

a {
clear: right;
color: #fff;
text-decoration: none;
text-transform:uppercase;
margin: 0 10px;
line-height: 80px;
}

label {
margin: 0 40px 0 0;
font-size: 40px;
color: #e8491d;
line-height: 80px;
display: none;
width: 40px;
float: right;
}

#toggle {
display: none;
}

a:hover {
color:#e8491d;
font-weight:bold;
}

@media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}

.menu {
    text-align: center;
    width: 100%;
    display: none;
}

.menu a {
    display: block;
    border-bottom: 1px solid #e8491d;
    margin: 0;
    color: #35424a;
    background: #eaeaeb;
}

#toggle:checked + .menu {
    display: block;
}

}

***
<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmYWJFK3dXNb1sWiwX8UUFai7NA4oMq5JG3MH5PmWxLrCF/DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg" alt="DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg">

<center><h3>🎄Thanks and have a nice day🎄</h3></center>

<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmYWJFK3dXNb1sWiwX8UUFai7NA4oMq5JG3MH5PmWxLrCF/DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg" alt="DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg">