I am struggling with adjusting the placement of my logo and dropdown icon in a responsive navbar. How can I move my class="active" to the extreme right and the logo to the extreme left, as shown in both images?
On a max-width of 700px, I want the layout to resemble image 2, with the logo on the extreme left and the dropdown on the extreme right.
Similarly, in image 1, I need the class="active" to be on the extreme right and the logo on the extreme left.
I am new to HTML and CSS and restricted from using JavaScript or Bootstrap for this project.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.navbar{
background-color: #6D6A6A;
display: flex;
}
.navbar a{
color: white;
text-align: center;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
padding: 14px 28px;
}
.navbar a:hover{
background-color: white;
color: black;
}
.content p{
text-align: justify;
margin: 10px;
padding: 10px;
}
#toggle{
display: none;
}
.togglearea{
background-color: #6D6A6A;
border-bottom: 2px solid white;
color: white;
padding: 10px;
display: flex;
justify-content: flex-end;
}
.togglearea label{
background-color: white;
height: 45px;
width: 50px;
color: black;
border-radius: 6px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.togglearea label span{
background-color: black;
height: 4px;
width: 70%;
margin: 2px 0px;
}
.togglearea{
display: none;
}
@media screen and (max-width: 700px)
{
.navbar{
flex-direction: column;
display: none;
}
#toggle:checked + .navbar{
display: flex;
}
.togglearea{
display: flex;
}
.navbar .logo{
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="togglearea">
<img class="togglelogo" src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" alt="cdac logo" height="150px" width="250px">
<label for="toggle">
<span></span>
<span></span>
<span></span>
</label>
</div>
<input type="checkbox" id="toggle" class="check">
<div class="navbar">
<img class="logo" src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" alt="cdac logo" height="150px" width="250px">
<a class="active" href="#">About Us</a>
<a class="active" href="#">Logout</a>
</div>
<div class="content">
<p>
[Insert Your Text Here]
</p>
</div>
</body>
</html>