Setting width : 0 is not hiding the text

Question

I would like to create a side navigation menu. That is visible on large screens and hidden on small screens and becomes visible when the javascript function is called to unhide it.

Everything is working as expected, however the content is not hiding even after setting the width to 0; the text is still visible.

    @media screen and (max-width: 768px) 
    {
    .mysidebar
    {
	height: 100%; 
    width: 0px; 
    position: fixed; 
    z-index: 15; 
    top: 0; 
    left: 0;
    background-color: #405a84; /
    overflow-x: hidden; 
    padding-top: 10px; 
    transition: 0.5s; 
	padding-right: 0px !important;
    padding-left: 0px !important;
	text-overflow : hidden;
	
    }
    }
    @media screen and (min-width: 768px) 
    {
    .mysidebar
    {
	width : 16%;
	height :  100%;
	display : inline-block;
	float : left;
    }
    .rightmainpane
    {
	width : 84%;
	height : auto;
	display : inline-block;
    }
    }

    <div class="mysidebar" id="mySidenav">
    Some sample content that is not hiding on small screen as expected, but the 
     background color etc are hiding.

    </div>
    <div class="rightmainpane" id="rightmainpane">
    Some ok content that should be visible 
    </div>

Using this javascript code to hide / display the id="mySidenav" div

document.getElementById("mySidenav").style.width = "250px";
document.getElementById("mySidenav").style.width = "0";

setting the display : none/block is resolving the issue. However it is not showing transition , the showing and hiding transition is quite important for me.

Please help. Thank you.

Cointon

Why not just use display: none? – Discompose

As I said, setting display : none is resolving one part of the issue. However when im trying to show it again, it is not showing the transition and instead immediately displaying the div. I want the 0.5s transition. – Cointon

thank you benvc for the answer, it resolved it. Thank you everyone. – Cointon

This is due to a typo -- the stray backslash at the end of background-color: #405a84; / Removing that backslash causes the overflow-x to hide the element, as intended. – Precaution

oh yes, i coped the code from a different template and removed some comments. Seems like i left out that one backslash. Thank you for the support. – Cointon

Answer 1

When you set the width to 0, also have overflow: hidden on your container.

Leotie

strangely, it worked when i used overflow : hidden instead of overflow-X : hidden. Don't know the reason why it works, but it worked. Thank you all. – Cointon

But overflow-y then doesn't hide. having both hidden hides the content. – Leotie

overflow-x will hide the element if used on its own, it's not necessary to include both axes. I believe the issue was the stray backslash in the line before it. – Precaution

Mind following Note: The overflow property only works for block elements with a specified height. Also I had to set padding to 0. – Rigamarole

Answer 2

Set opacity: 0, to hide the content as well

document.getElementById("mySidenav").style.opacity = "0";

document.getElementById("mySidenav").style.width = "250px";
document.getElementById("mySidenav").style.width = "0";
setTimeout(function() {
  document.getElementById("mySidenav").style.opacity = "0";
}, 0);

@media screen and (max-width: 768px) {
  .mysidebar {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 15;
    top: 0;
    left: 0;
    background-color: #405a84;
    / overflow-x: hidden;
    padding-top: 10px;
    transition: 0.5s;
    padding-right: 0px !important;
    padding-left: 0px !important;
    text-overflow: hidden;
  }
}

@media screen and (min-width: 768px) {
  .mysidebar {
    width: 16%;
    height: 100%;
    display: inline-block;
    float: left;
  }
  .rightmainpane {
    width: 84%;
    height: auto;
    display: inline-block;
  }
}

<div class="mysidebar" id="mySidenav">
  Some sample content that is not hiding on small screen as expected, but the background color etc are hiding.

</div>
<div class="rightmainpane" id="rightmainpane">
  Some ok content that should be visible
</div>

Sulfapyridine

instead of setting overflow-x : hidden, i tried setting overflow : hidden as suggested by benvc (seems like he deleted the comment). It worked. Your answer is nice and neatly works. Thank you, and thanks everyone. – Cointon

Answer 3

I solved it using

content-visibility: auto;

Colincolinson