Sidebar toggle effect is breaking my menu items

Question

I'm creating a very simple sidenav for a mobile app. I followed this example.

Everything is working fine, except that when I close the menu, if you pay attention, my menu items <a> tags are "breaking" as the sidebar shrinks back to place. If you see the example code from above, their menu items do not break.

Here's my code.

function openNav() {
                document.getElementById("sidenav").style.width = "80%";
            }

            function closeNav() {
                document.getElementById("sidenav").style.width = "0";
            }

/*-- Top Navbar --*/
.top-navbar {
	width: 100%;
	height: 8%;
	background-color: #E4E4E4;
	font-size: 1.5em;
	padding-top: 2%;
}

.top-navbar span {
	margin-left: 4%;
	padding-top: 2%;
	color: #2c2c2c;
}

/*-- Sidebar --*/
.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #E4E4E4;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}

.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 1em;
	color: #2C2C2C;;
	display: block;
	transition: 0.3s;
}

.sidenav a:hover {
	color: #9F2241;
}

/*.sidenav a:before {
	content: "";
	display: block;
	background: url(../img/icono-retirar.svg) no-repeat;
	width: 20px;
	height: 20px;
	float: left;
	margin-left: 0 6px 0 0;
}
*/

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
	color: #2c2c2c;
}

<div id="sidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="#">Haz un retiro</a>
            <a href="#">Invita un amigo</a>
            <a href="#">Ayuda</a>
            <a href="#">Términos y condiciones</a>
            <a href="#">Cerrar sesión</a>
        </div>

        <div class="top-navbar">
            <span onclick="openNav()">&#9776;</span>
        </div>

Answer 1

Add white-space:nowrap; to your .sidenav a css rule.