Sidebar width could not adjust - html

Question

I'm trying to do a sidebar for my html page. But i could not adjust the width of the sidebar. Also the menu icon when click should be closing/open the sidebar but it does not work.
Im a new learner , please help.
My code at here!
#sidebar {
background:#151719;
height:1000px;
width:20%; <!--- Cannot adjust width --->
position:absolute;
left:-248px; <!--- this will let the sidebar disapper --->
transition:all .3 ease-in-out;
-webkit-transition:all .3 ease-in-out;
-moz-transition:all .3 ease-in-out;
-ms-transition:all .3 ease-in-out;
-o-transition:all .3 ease-in-out;
}

Answer 1

You are close, but comment separators should be /*..*/, not <!---..--->. CSS is not HTML. Those comments prevent the CSS from being parsed correctly.
Then there is a #sidebar {width: 100%; halfway down, which overrides the width:248%; on the top.
And finally, the selector for moving the sidebar on selecting the checkbox should be #menuToggle:checked ~ #sidebar. Yours did nothing.
If you correct those errors, the page works flawlessly.
*{padding:0px;
margin:0px;
font-family:sans-serif;}
#sidebar{
background:#151719;
height:1000px;
width:248px; /* Cannot adjust width */
position:absolute;
left:-248px; /* this will let the sidebar disapper */
transition:all .3 ease-in-out;
-webkit-transition:all .3 ease-in-out;
-moz-transition:all .3 ease-in-out;
-ms-transition:all .3 ease-in-out;
-o-transition:all .3 ease-in-out;
}
#sidebar .menu li{
list-style-type:none;}
#sidebar .menu a{
text-decoration:none;
color:rgba(230,230,230,0.9);
display:block;
padding:15px 0;
border-bottom:1px solid rgba(100,100,100,0.45);}
#header{
width:100%;
height:5%;
margin:auto;
border-bottom:1px solid #EEE;}
#header .brand{
float:left;
line-height:50px;
color:#151719;
font-size:30px;
font-weight:bold;
padding-left:20px;}
#sidebar{
/* width:100%; */ /* removed because this would override the 248px above */
text-align:center;}
#sidebar .menu li:last-child a{border-bottom:none;}
#sidebar a:hover{
background:grey;
color:black;}
.menu-icon{
margin:2.5px 5px 0px 0px;
padding:10px 15px;
border-radius:5px;
background:#151719;
color:rgba(230,230,230,0.9);
cursor:pointer;
float:right;}
#menuToggle:checked ~ #sidebar {
position:absolute;
left:0;} /* Not sure is it correct or not, by clicking the checkbox, the sidebar should be displayed nicely, back to original */
<input type="checkbox" id="menuToggle" style="display:none;">
<label for="menuToggle" class="menu-icon">☰</label>
<div id="header">
<div class="brand">Cinema</div>
</div>
<div id="sidebar">
<ul class="menu">
<li>Dashboard</li>
<li>Help Center</li>
<li>Summary</li>
<li>Customer Interface</li>
</ul>
</div>

Answer 2

you can set width like this :
width: 20vw;
left: 0; // left: -20vw;

Answer 3

Your styles are applied to the #menuToggle item. Therefore the sidebar never hears about this change.
#menuToggle:checked {
position:absolute;
left:0;
}
Also because both elements do not have HTML relations, a CSS workaround might be risky. It's important to mention the selector #menuItem ~ #sidebar which will select #sidebars that precede #menuItem.
#menuToggle:checked ~ #sidebar {
position:absolute;
left:0;
}
Although it is definitely more prone to break in the future when the website has more content.
I suggest you have an event listener on the checkbox to toggle a class on the sidebar element. This can be done like so:
document.getElementById('menuItem').addEventListener('change', function(e) {
let sidebar = document.getElementById('sidebar');
this.checked ?
sidebar.classList.add('active') :
sidebat.classList.remove('active');
});