Hey i am trying to make a navbar but pseudo Property :checked with ~ not working here is HTML code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="css.js"></script>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<span class="menu-btn">
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
</span>
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
</html>
And here is the CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn, label{
/*"display: none;*/
}
#media(min-width: 600px){
label {
}
.nav-links a {
color: white;
}
.nav-links{
float: right;
justify-content: space-between;
}
.nav-links a:hover{
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
nav {
/*display: flex;*/
}
.title, .nav-links{
display: inline;
}
}
#media(max-width: 599px){
.nav-links {
background-color: black;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra{
display: none;
}
.nav-links{
text-align: center;
display: block;
}
.nav-links a {
display: block;
transition: .9s;
}
nav{
padding-right: 0px;
}
.nav-links a:hover, .active{
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links{
position: fixed;
left: -100%;
}
#nav-btn:checked ~ .nav-links{
left: 0%;
}
}
Can you please share about what is the problem here and how to fix that problem
And I hav also applied display none to .nav-link and display block to #nav-btn:checked ~ .nav-links but It doesn't work at all. Thank you for solving my question
~ is the General sibling combinator.
.nav-links is not a sibling of #nav-btn
You'd need to restructure your HTML for this to work.
Use JavaScript instead. Take the opportunity to add ARIA attributes like aria-haspopup and aria-expanded.
Related
Hey i am trying to make a navbar again and I have declared that the anchor tag have display block but white space appear
Here isy HTML code=
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="css.js"></script>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<span class="menu-btn">
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
</span>
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
</html>
And this is CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn, label{
display: none;
}
#media(min-width: 600px){
.nav-links a {
color: white;
}
.nav-links{
float: right;
justify-content: space-between;
}
.nav-links a:hover{
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
nav {
/*display: flex;*/
}
.title, .nav-links{
display: inline;
}
}
#media(max-width: 599px){
label {
display: inline;
float: right;
}
.extra{
display: none;
}
.nav-links{
text-align: center;
display: block;
}
.nav-links a {
display: block;
}
}
And the white space is only appear in mobile devices so please help me i need it fast⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
You have a padding-right on nav section
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
make padding-right: 0; for smaller screen.
#media(max-width: 599px){
nav{
padding-right: 0px;
}
}
I am trying to create a navbar but the animation are not working, As you can see, I have put position: fixed; and right: -100%; to the .nav-links so that it can hide and not create white space at the right and #nav-btn:checked~.nav-links { right: 0; width: 100% !important; }
And when I click at the checkbox it does not show the animation and appear without any animation and that's my problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn,
label {
display: none;
}
#media(min-width: 600px) {
label {}
.nav-links a {
color: white;
}
.nav-links {
float: right;
justify-content: space-between;
}
.nav-links a:hover {
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
.title,
.nav-links {
display: inline;
}
}
#media(max-width: 599px) {
.nav-links {
background-color: black;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra {
display: none;
}
.nav-links {
text-align: center;
display: block;
}
.nav-links a {
display: block;
transition: .9s;
}
nav {
padding-right: 0px;
}
.nav-links a:hover,
.active {
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links {
position: fixed;
right: -100%;
}
#nav-btn:checked~.nav-links {
right: 0;
width: 100% !important;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
If I understand correctly, you need to put the transition on the nav links container, not the links. That's where the open/close happens.
I've also moved your width rule to the container for all states, not just when it's shown. That fixes the close transition.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn,
label {
display: none;
}
#media(max-width: 9599px) {
.nav-links {
background-color: black;
transition: .9s;
text-align: center;
display: block;
width: 100%;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra {
display: none;
}
.nav-links a {
display: block;
}
nav {
padding-right: 0px;
}
.nav-links a:hover,
.active {
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links {
position: fixed;
right: -100%;
}
#nav-btn:checked~.nav-links {
right: 0;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
So to make it simple i want to make a responsive nav-bar using only html and css but ive encountered a problem, i trying to use a checkbox to make a hamburger menu so when i click it it will display the nav bar below it but when i click the checked state apparently dont work
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>King Toot's Tienda de instrumentos</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://kit.fontawesome.com/f436282179.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav>
<div class="logo-container">
<img src="">
<label class="logo-txt">King Toot's</label>
</div>
<div>
<input type="checkbox" name="check">
<label for="check" class="hamburger-btn">
<i class="fas fa-bars"></i>
</label>
</div>
<ul class="nav-list">
<li>Instrumentos</li>
<li>Marcas</li>
<li>Contacto</li>
</ul>
</nav>
</header>
<section></section>
<section></section>
<footer></footer>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
#font-face{
font-family: slenco;
src: url(../slenco.otf);
}
body{
font-family: slenco, sans-serif;
}
/*Navbar*/
nav{
height: 75px;
width: 100%;
background-color: #202020;
display: flex;
justify-content: space-between;
}
.logo-container{
display: flex;
align-items: center;
width: auto;
}
.logo{
margin-left: 2px;
}
.logo-txt{
font-size: 30px;
line-height: 75px;
padding-left: 10px;
font-weight: bold;
color: white;
}
.nav-list{
position: fixed;
width: 100%;
height: 0vh;
top: 75px;
background-color: #2f2f2f;
float: right;
text-align: center;
transition: all .5s;
}
.nav-list li{
display: none;
line-height: 30px;
margin: 50px 0;
transition: all .5s;
}
.nav-list li a{
color: white;
font-size: 20px;
text-transform: uppercase;
}
.nav-list li a:hover{
color: #3f3f3f;
transition: 0.5s;
}
.hamburger-btn{
display: block;
font-size: 30px;
color: white;
float: right;
line-height: 75px;
margin-right: 45px;
cursor: pointer;
}
#check{
display: none;
}
#check:checked ~ .nav-list{
height: 100vh;
}
#check:checked ~ .nav-list li{
display: block;
}
i will be grateful if u can help me im only a student barely know any of this stuff
Your CSS is attempting to target #check (which is an ID selector) but the checkbox does not have an id of "check".
Also, the general sibling combinator only works on siblings. So #check:checked~.nav-list does not work while there is a <div> around the <input> and <label>, because #check and .nav-list are not siblings.
nav {
width: 100%;
background-color: #202020;
display: flex;
justify-content: space-between;
}
.nav-list {
list-style: none;
position: fixed;
width: 100%;
height: 0vh;
top: 75px;
background-color: #2f2f2f;
transition: all .5s;
}
.nav-list li {
display: none;
}
.hamburger-btn {
font-size: 30px;
color: white;
line-height: 75px;
}
#check {
display: none;
}
#check:checked~.nav-list {
height: 100vh;
}
#check:checked~.nav-list li {
display: block;
}
<script src="https://kit.fontawesome.com/f436282179.js" crossorigin="anonymous"></script>
<header>
<nav>
<input id="check" type="checkbox">
<label for="check" class="hamburger-btn"><i class="fas fa-bars"></i></label>
<ul class="nav-list">
<li>Instrumentos</li>
<li>Marcas</li>
<li>Contacto</li>
</ul>
</nav>
</header>
Demo
try adding !important
#check:checked ~ .nav-list{
height: 100vh !important;
}
#check:checked ~ .nav-list li{
display: block !important;
}
I'm trying to make a responsive website and when I put my paragraph on the page and I make the screen smaller the paragraph goes all the way down the screen and not really in a paragraph. It is just a long word tower. How can I fix this? Here is a picture of what I am talking about. https://i.stack.imgur.com/HYJzs.png
and also how do I make it so thre is not that much space between the words?
here is my code:
enter cod
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex;
height: 120px;
width: 100%;
background: #192841;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
margin-bottom: 100px;
}
nav .logo {
color: #fff;
font-size: 30px;
font-weight: 600;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: cyan;
}
}
/*index*/
.contentHome {
position: absolute;
top: 5%;
margin-top: 100px;
text-align: center;
width: 100%;
color: #1b1b1b;
}
.contentHome div {
font-size: 30px;
font-weight: 400;
}
.contentHome2 {
margin-left: 100px;
margin-top: 150px;
width: 40%;
text-align: justify;
height: 100px;
align-items: center;
}
.paragrahHome h2 {
white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">Nick's Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="../index.html">Home</a></li>
<li>Google Form</li>
<li>Movies</li>
<li>Tv-Shows</li>
<li>Top Movies</li>
<li>Top Tv-Shows</li>
</ul>
</nav>
<div class="contentHome">
<div>Welcome To Nick's Movie And Tv-Show Reviews</div>
</div>
<div class="contentHome2">
<div class="paragrahHome">
<h2>About this website:</h2>
<p>
Welcome to my Nick's Reviews. This website will be about the movies,
and TV shows that I have watched and what I think about them. When I
write my reviews, I will give honest feedback about them and the
ratings I think they deserve. I will also list the ratings of movies
and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
other trusted sources). If you want to recommend and comment on a
movie or TV show you want me to watch, just go to the Google form and
fill it out.
</p>
</div>
</div>
</body>
</html>
at .contenthome2 you have defined width 40% so that is why for mobile view it takes up only 40% of width , you can give 40% for web view and using media queries can increase the width for paragraph as per your requirements .also margin-left:100px and margin-right:150px will work fine for web view but will take more space for mobile view . you can try using value in % .
I have modified code and given width:100% and padding:10% 15%;
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex;
height: 120px;
width: 100%;
background: #192841;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
margin-bottom: 100px;
}
nav .logo {
color: #fff;
font-size: 30px;
font-weight: 600;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: cyan;
}
}
/*index*/
.contentHome {
position: absolute;
top: 5%;
margin-top: 100px;
text-align: center;
width: 100%;
color: #1b1b1b;
}
.contentHome div {
font-size: 30px;
font-weight: 400;
}
.contentHome2 {
padding: 5% 10%;
width: 100%;
text-align: justify;
height: 100px;
align-items: center;
}
.paragrahHome h2 {
white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">Nick's Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="../index.html">Home</a></li>
<li>Google Form</li>
<li>Movies</li>
<li>Tv-Shows</li>
<li>Top Movies</li>
<li>Top Tv-Shows</li>
</ul>
</nav>
<div class="contentHome">
<div>Welcome To Nick's Movie And Tv-Show Reviews</div>
</div>
<div class="contentHome2">
<div class="paragrahHome">
<h2>About this website:</h2>
<p>
Welcome to my Nick's Reviews. This website will be about the movies,
and TV shows that I have watched and what I think about them. When I
write my reviews, I will give honest feedback about them and the
ratings I think they deserve. I will also list the ratings of movies
and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
other trusted sources). If you want to recommend and comment on a
movie or TV show you want me to watch, just go to the Google form and
fill it out.
</p>
</div>
</div>
</body>
</html>
I want to create a sliding sidebar menu but it seems not to be working. I want it to slide when I click on the icon. I used css and checkbox to make enable this code but it seems not to be working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SideBar</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://kit.fontawesome.com/5e85fec85e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="banner">
<div id="header">
<h1>LOGO</h1>
</div>
<div id="menu">
<input type="checkbox" id="check">
<label for="check" class="show-menu-btn">
<i class="fa fa-bars"></i>
</label>
<ul class="dropdown">
<li>Home</li>
<li><>About</li>
<li>Contact</li>
<label for="check" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
</nav>
This is the css code. I want to create a sliding sidebar menu but it seems not to be working. I want it to slide when I click on the icon. I used css and checkbox to make enable this code but it seems not to be working.
#import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
* {
margin: 0;
padding: 0;
}
.banner {
background: #475050;
border-bottom: 2px solid black;
display: flex;
color: white;
line-height: 0.7;
}
#header {
padding: 15px 0 0 10px;
font-family: fantasy;
letter-spacing: 2px;
}
#menu {
margin-left: auto;
padding-right: 10px;
}
#menu ul {
display: flex;
}
#menu ul li {
list-style: none;
padding: 20px 10px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#menu ul li a {
text-decoration: none;
color: white;
cursor: pointer;
}
#menu ul li a:hover {
color: crimson;
}
#menu i, #check {
display: none;
}
#media (max-width: 486px) {
.banner {
display: block;
}
#header {
padding-bottom: 10px;
border-bottom: 2px solid black;
}
#header h1{
margin: 0;
font-size: 1.5rem;
line-height: normal;
font-weight: 700;
}
#menu {
width: 100%;
background-color: #475050;
}
#menu i {
display: block;
}
#menu ul {
display: block;
text-align: center;
padding: 15px 0;
width: 50%;
position: fixed;
height: 20%;
background: #475050;
right: -50%;
line-height: normal;
transition: 1.7s;
}
#menu ul li {
padding: 0;
padding-top: 5px;
}
#menu ul li a {
color: white;
text-decoration: none;
padding: 0;
width: 100%;
height: 100%;
}
#menu-hide {
display: none;
}
#menu-show {
display: block;
}
.show-menu-btn {
height: 24px;
width: 25px;
background-color: yellow;
text-align: center;
border-radius: 4px;
margin-top: -38px;
margin-left: 90%;
cursor: pointer;
transition: left 0.4s ease;
position: absolute;
color: black;
float: right;
}
.show-menu-btn,
.hide-menu-btn {
display: block;
}
.show-menu-btn,
.hide-menu-btn {
transition: 0.4s;
font-size: 1.2rem;
cursor: pointer;
}
.hide-menu-btn i,
.show-menu-btn i {
padding-top: 2px;
}
.hide-menu-btn {
position: relative;
float: right;
margin-top: -35%;
height: 24px;
width: 25px;
background-color: black;
text-align: center;
border-radius: 4px;
color: white;
}
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: crimson;
}
#menu i,
#check {
display: block;
}
#check {
position: absolute;
visibility: hidden;
z-index: 1111;
}
#check:checked ~ #menu ul{
right: 0%;
}
This is happening because you can't go back to parent elements once you are inside their children elements. So instead of
#check:checked ~ #menu ul{
right: 0%;
}
remove #menu because you are already inside #menu element, instead use this:
#check:checked ~ ul{
right: 0%;
}
Here is the working fiddle: https://jsfiddle.net/q9vsry40/2/