DawnZHANG DawnZHANG - 1 month ago 8
CSS Question

Stop the side nav bar from squeeze content. CSS

I'm using the sample code to create a side navi bar, see the code below:



<!DOCTYPE html>
<html>
<style>
body {
font-family: "Lato", sans-serif;
}

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

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

.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}

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

#main {
transition: margin-left .5s;
padding: 16px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<body>

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">Findme About</a>
<a href="#">Services</a>
<a href="#">ents</a>
<a href="#">Contact</a>
</div>

<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>

</body>
</html>





But I do find a problem, if change



<a href="#">About</a>





to



<a href="#">Findme About</a>





, and now try see the result again when you try to slide the navi bar, you'll realize that the "Findme" will be squeezed to the below row of "About" thus make them in two rows when opening or closing the bar.
How to stop it?? I want "Fimeme" and "About" to be on the same row however.
Please advise!

Answer

try this one:

.sidenav{
    white-space: nowrap;
}

this will prevent your li a from line wrapping