Hi Everyone

I will represent how to make Responsive Slide Menu

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

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

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

*** ![4.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520564240/hultw4f616cvyrhyhrnc.png) ***

*** Code HTML *** ``` Responsive Side Menu

Responsive Side Menu

``` ***

*** Code CSS *** ``` body{ font-family:"Arial", Serif; background-color:#f4f4f4; overflow-x:hidden; } .navbar{ background-color:#3b5998; overflow:hidden; height:63px; } .navbar a{ float:left; display:block; color:#f2f2f2; text-align:center; padding:14px 16px; text-decoration:none; font-size:17px; } .navbar ul{ margin:8px 0 0 0; list-style:none; } .navbar a:hover{ background-color:#ddd; color:#000; } .side-nav{ height:100%; width:0; position:fixed; z-index:1; top:0; left:0; background-color:#111; opacity:0.9; overflow-x:hidden; padding-top:60px; transition:0.5s; } .side-nav a{ padding:10px 10px 10px 30px; text-decoration:none; font-size:22px; color:#ccc; display:block; transition:0.3s; } .side-nav a:hover{ color:#fff; } .side-nav .btn-close{ position:absolute; top:0; right:22px; font-size:36px; margin-left:50px; } #main{ transition:margin-left 0.5s; padding:20px; overflow:hidden; width:100%; } @media(max-width:568px){ .navbar-nav{display:none} } ``` *** DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg

DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg

🎄Thanks and have a nice day🎄

DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg

ryal