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;
}
}
1 Comment
[…] user experience. Without CSS, websites would be less pleasing to the eye and likely much harder to navigate. In addition to layout and format, CSS is responsible for font color and […]