Responsive Nav bar
1 April, 2023
0
0
0
Contributors
What is the meaning of a responsive navbar
A responsive navbar, also known as a responsive navigation menu, is a user interface component used in web development that adapts to different screen sizes and device types.
A navbar typically contains links to different sections or pages of a website and provides users with a way to navigate through the site. However, on smaller screens, a traditional navbar may become difficult to use because of its limited space.
To solve this problem, a responsive navbar is designed to adjust its layout and functionality depending on the size of the screen. This can include collapsing menu items into a hamburger icon or stacking menu items vertically, making the navigation menu more accessible and user-friendly on smaller screens.
Overall, the goal of a responsive navbar is to provide a seamless and intuitive navigation experience for users, regardless of the device they're using.
Media queries
We will make our navbar responsive using media queries. So what are media queries?
Media queries are a fundamental component of responsive web design. They are a set of CSS rules that allow you to specify different styles for different devices and screen sizes. With media queries, you can adjust the layout and design of a website based on the characteristics of the device or screen it is being viewed.
Media queries work by checking the properties of the device, such as the screen size, orientation, resolution, and color depth, and then applying the appropriate CSS styles. By using media queries, you can create a website that looks great on any device, from large desktops to small smartphones.
Media queries are typically defined in the CSS stylesheet of a website using the @media rule. The @media rule specifies the media type and one or more conditions, which are written using media features such as width, height, orientation, and aspect ratio. For example, the following media query applies to screens with a maximum width of 600 pixels:
COPY
@media screen and (max-width: 600px) {
/* CSS rules for screens with a maximum width of 600px */
}
Media queries are a powerful tool for creating responsive web designs that adapt to the needs of different devices and screen sizes.
To make our responsive below I'm sharing code so you can understand it and do it in your pc so that you will don't have any doubts
COPY
<!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>Document</title>
<link rel="stylesheet" href="pr.css">
</head>
<body>
<script src="pr.js"></script>
<nav>
<div class="logo">logo</div>
<ul class="navlinks">
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</body>
</html>
To make it responsive so it can adapt to different screen sizes
COPY
*{
margin: 0;
border: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
font-family: monospace;
text-transform: uppercase;
background-color: rgba(201, 225, 222, 0.486);
}
nav{
display: flex;
background-color: rgb(15, 21, 73);
justify-content: space-around;
width: 100%;
align-items: center;
}
.logo{
font-size: 32px;
color: antiquewhite;
}
ul{
float:inline-end;
display: flex;
justify-content: space-around;
font-size: 20px;
width: 35%;
line-height: 30px;
}
li{
list-style: none;
float: right;
margin: 15px auto;
color: antiquewhite;
}
.burger{
display: none;
}
.burger div{
background-color: aliceblue;
height: 2px;
width: 24px;
margin: 7px;
}
@media screen and (max-width:768px){
body{
overflow-x: auto;
}
.navlinks {
position: absolute;
right: 0;
height: 92vh;
top: 4vh;
background-color: #08081e;
overflow-x: auto;
align-items: center;
color: rgb(188, 79, 79);
width: 100%;
transform: translatex(100%);
transition: transform 0.20s ease-in;
}
nav{
height: 50px;
}
.navlinks li{
opacity: 0;
}
.burger{
display: block;
cursor: pointer;
}
.navactive{
transform: translatex(0%);
}
}
@media screen and (max-width: 576px) {
body{
overflow-x: hidden;
}
.navlinks {
position: absolute;
right: 0;
height: 92vh;
top: 4vh;
background-color: #08081e;
overflow-x: auto;
align-items: center;
color: rgb(188, 79, 79);
width: 100%;
transform: translatex(100%);
transition: transform 0.20s ease-in;
}
nav{
height: 50px;
}
.navlinks li{
opacity: 0;
}
.burger{
display: block;
cursor: pointer;
}
}
@media screen and (max-width: 992px){
body{
overflow-x: auto;
}
.navlinks {
position: absolute;
right: 0;
height: 92vh;
width: 100%;
top: 4vh;
background-color: #08081e;
overflow-x: hidden;
align-items: center;
color: rgb(188, 79, 79);
transform: translatex(100%);
transition: transform 0.20s ease-in;
}
nav{
height: 50px;
}
.navlinks li{
opacity: 0;
}
.burger{
display: block;
cursor: pointer;
}
}
That's a wrap all done you have made your nav bar responsive.
In the next show, we will add some animation to the hamburger icon. So stay connected with me.