The navbar position is not changing when I am clicking the checkbox. I have tried the other solutions from the similar questions but nothing is working. I do not understand why it is not working. do I have to do display: block on the navbar?. I have watched many tutorials but I just cant get it to implement it here.
--index.html--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>Presentation Blog Page</title>
</head>
<body>
<div class="sidebar">
<div class="portfolio-info">
<div class="image">
<img src="/img/venu.jpg" alt="">
</div>
<div class="name">
<p>Venu Gopal Reddy</p>
<p>Programming Enthusiast</p>
</div>
</div>
<div>
<label for="check">☰</label>
<input type="checkbox" id="check">
</div>
<div class="navbar">
<div class="nav-items">
<a href="#home">HOME</a>
<a href="#blog">BLOG</a>
<a href="#contact">CONTACT</a>
</div>
<div class="social-icons">
<a href=""><i class="fab fa-github"></i></a>
<a href=""><i class="fab fa-linkedin"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</body>
</html>
--style.css--
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
:root {
--primary-text-color: #35383b; /*(53,56,59)*/
--secondary-text-color: #555a5f; /*(85,90,95)*/
--primary-bg-color: #6f8f8e; /*(111,143,142)*/
--secondary-bg-color: #96b2b1; /*(150,178,177)*/
}
html,
body {
font-family: 'Roboto', sans-serif;
color: var(--primary-text-color);
background-color: #e2e2e2;
font-size: 100%;
}
@media(max-width: 768px) {
.sidebar {
width: 100%;
height: 100px;
background-color: var(--primary-bg-color);
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
/* Portfolio styling */
.sidebar .portfolio-info {
flex-basis: 50%;
height: 100%;
display: inherit;
justify-content: flex-start;
align-items: center;
}
.sidebar .portfolio-info .image {
width: 5rem;
height: 5rem;
margin-right: 1rem;
}
.sidebar .portfolio-info .image img {
width: 100%;
height: 100%;
border: none;
border-radius: 50%;
}
.sidebar .portfolio-info .name p:first-child {
font-size: 1.5rem;
}
.hamburger label{
display: block;
cursor: pointer;
}
/* Menu styling */
.sidebar .navbar {
position: absolute;
top: 0;
right: -1000px;
display: flex;
flex-direction: column;
flex-basis: 50%;
width: 100%;
height: 300px;
justify-content: space-evenly;
align-items: center;
}
#check:checked ~ .sidebar .navbar {
right: 100px;
}
}
what am I doing wrong here?
You were doing a small mistake in selector
#check:checked ~ .sidebar .navbar
here, I have corrected it, by just a small change in your HTML. ~ does not work the way you were using it, Read it here.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
:root {
--primary-text-color: #35383b; /*(53,56,59)*/
--secondary-text-color: #555a5f; /*(85,90,95)*/
--primary-bg-color: #6f8f8e; /*(111,143,142)*/
--secondary-bg-color: #96b2b1; /*(150,178,177)*/
}
html,
body {
font-family: 'Roboto', sans-serif;
color: var(--primary-text-color);
background-color: #e2e2e2;
font-size: 100%;
}
@media(max-width: 768px) {
.sidebar {
width: 100%;
height: 100px;
background-color: var(--primary-bg-color);
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
/* Portfolio styling */
.sidebar .portfolio-info {
flex-basis: 50%;
height: 100%;
display: inherit;
justify-content: flex-start;
align-items: center;
}
.sidebar .portfolio-info .image {
width: 5rem;
height: 5rem;
margin-right: 1rem;
}
.sidebar .portfolio-info .image img {
width: 100%;
height: 100%;
border: none;
border-radius: 50%;
}
.sidebar .portfolio-info .name p:first-child {
font-size: 1.5rem;
}
.hamburger label{
display: block;
cursor: pointer;
}
/* Menu styling */
.sidebar .navbar {
position: absolute;
top: 0;
right: -1000px;
display: flex;
flex-direction: column;
flex-basis: 50%;
width: 100%;
height: 300px;
justify-content: space-evenly;
align-items: center;
transition: all 1s;
}
#check {display: none;}
#check:checked + .navbar {
right: 100px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css">
<title>Presentation Blog Page</title>
</head>
<body>
<div class="sidebar">
<div class="portfolio-info">
<div class="image">
<img src="/img/venu.jpg" alt="">
</div>
<div class="name">
<p>Venu Gopal Reddy</p>
<p>Programming Enthusiast</p>
</div>
</div>
<label for="check">☰</label>
<input type="checkbox" id="check">
<div class="navbar">
<div class="nav-items">
<a href="#home">HOME</a>
<a href="#blog">BLOG</a>
<a href="#contact">CONTACT</a>
</div>
<div class="social-icons">
<a href=""><i class="fab fa-github"></i></a>
<a href=""><i class="fab fa-linkedin"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</body>
</html>