I don’t understand whether this is the correct way of creating a responsive navbar. I am getting the responsive output in both, desktop browser and the phone’s browser. Do I have to do in more professional way or something ?
This is the output:
enter image description here
enter image description here
This is my HTML code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar">
<div class="links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</div>
<div class="rightBox">
<div class="box"></div>
</div>
</div>
</body>
</html>
This is CSS code:-
body{
height: 100vh;
background-image: linear-gradient(to top, yellow, rgb(230, 255, 153), rgb(43, 234, 43)) ;
}
.navbar{
display: flex;
flex: 1;
flex-grow: 1;
flex-shrink: 1;
background-color: rgb(245, 221, 189);
height: 80px;
}
.links{
display: flex;
justify-content: space-between;
justify-items: center;
margin-top: 25px;
margin-left: 10px;
margin-right: 9px;
height: min-content;
}
.rightBox{
display: grid;
height: max-content;
width: 90%;
margin:5px;
justify-content: right;
}
.box{
background-color: brown;
height: 50px;
width: 50px;
border-radius: 50px;
margin: 10px;
cursor: pointer;
}
a{
font-size: larger;
margin: 10px;
text-decoration: none;
color: #000;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
a:hover{
text-decoration: underline;
background-color: blanchedalmond;
padding: 20px;
transition: all ease-out .2s;
}
li{
list-style: none;
}
New contributor
Soham Chavan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.