Uploaded October 2015 | Updated September 2026, 2 weeks ago

---

How to make responsive Nav(Navigation) using HTML(Hyper Text Markup Language), CSS(Cascade Style Sheet) and Javascript(JS), with easy steps to follow
to download the project follow this link:
responsive-nav.com

How to make free responsive slideshow for your website
youtube.com/watch?v=T-wiG25tLew

Safaa Al-Hayali


The style code for navigation menu:
=====================================
@media screen and (max-width:639px){
a.nav-toggle{
text-decoration: none;
float: right;
width:50px; height:50px;
text-align:center;
line-height:50px;
vertical-align:middle;
}
a.nav-toggle:before{
content: "=";
font-size: 28px;
color: #f4421a;

}
.nav-toggle.active::before {
font-size: 24px;
content:"^";
}
nav.nav-collapse a{
color:#777; width:100%;
font-size:20px;
border:1px solid #eee;
padding:10px;display:block;
text-align:center;
border-bottom:0;
}
nav.nav-collapse a:hover{
text-decoration:none;
background:#55A2DB;
color:#fff;
}
}
@media screen and (min-width:640px) and (max-width:1920px){
nav.nav-collapse{ margin:10px 0;}
nav.nav-collapse ul li{
}
.nav-collapse li a{
display: block;
text-align:center;
border:1px solid #eee;
width:100px;
float: left;
height: 40px;
line-height: 40px;
vertical-align: middle;
background:#303030;
color:#fff;
border-right:0;
}
.nav-collapse li a:hover{
text-decoration: none;
border:1px solid #ddd;
background:#DE2925;
border-right:0;
color:#fff;
}
}



//////end of style code /////////