The navbar does this jumping to the next line. I tried using overflow, but its not working,
so, i just put overflow in every element just to try.
i have put the css and attached few images on how it jumps during transition.
*,
*::after,
*::before{
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
}
.sideNav{
height: 100vh;
width: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
background-color: black;
z-index: 100;
transition: all 5s;
overflow: hidden;
}
.sideNav .header {
font-size: 32px;
font-weight: 600;
color: white;
text-align: left;
line-height: 60px;
padding-left: 8px;
}
.menu {
margin-top: 30px;
}
.menu ul li {
list-style-type: none;
padding: 8px 16px;
margin: 1px 0;
width: 100%;
transition: all 0.15s;
overflow: hidden;
}
.menu a {
color: white;
text-decoration: none;
font-size: 24px;
transition: padding 0.15s;
display: block;
overflow: hidden;
}
.menu i{
margin-right: 10px;
}
.menu a:hover {
padding-left: 15px;
}
.menu ul li:hover {
border-left: 1px solid white;
border-right: 1px solid rgba(255, 255, 255, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-show-nav{
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background-color: black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.btn-show-nav i{
color: white;
font-size: 20px;
}
.closebtn{
position: absolute;
top: 10px;
right: 25px;
font-size: 32px;
font-weight: 700;
color: white;
}
this is the html
<label class="btn-show-nav" onclick="show()">
<i class='fas fa-bars'></i>
</label>
<section>
<nav class="sideNav" id="mySidenav">
<a href="#" class="closebtn" id="closebtn" onclick="closeNav()">✖</a>
<div class="header">
CodingLabs
</div>
<div class="menu">
<ul>
<li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
<li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
<li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
<li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
<li><a href="#"><i class="fas fa-question-circle"></i>About</a></li>
<li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
<li><a href="#"><i class="fas fa-phone-volume"></i>Contact</a></li>
<li><a href="#"><i class="far fa-comments"></i>Feedback</a></li>
</ul>
</div>
</nav>
</section>
mid-way through transition, the texts are going to next line, as it closes
it also does the same while opening
>Solution :
Could you try setting the a tag to flex.
When using flex the content will stay on the same line (won’t wrap),
flex-wrap: wrapcan be used to wrap flex children.
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}*,
*::after,
*::before{
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
}
.sideNav{
height: 100vh;
width: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
background-color: black;
z-index: 100;
transition: all 5s;
overflow: hidden;
}
.sideNav .header {
font-size: 32px;
font-weight: 600;
color: white;
text-align: left;
line-height: 60px;
padding-left: 8px;
}
.menu {
margin-top: 30px;
}
.menu ul li {
list-style-type: none;
padding: 8px 16px;
margin: 1px 0;
width: 100%;
transition: all 0.15s;
overflow: hidden;
}
.menu a {
color: white;
text-decoration: none;
font-size: 24px;
transition: padding 0.15s;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
}
.menu i{
margin-right: 10px;
}
.menu a:hover {
padding-left: 15px;
}
.menu ul li:hover {
border-left: 1px solid white;
border-right: 1px solid rgba(255, 255, 255, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-show-nav{
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background-color: black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.btn-show-nav i{
color: white;
font-size: 20px;
}
.closebtn{
position: absolute;
top: 10px;
right: 25px;
font-size: 32px;
font-weight: 700;
color: white;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<label class="btn-show-nav" onclick="openNav()">
<i class='fas fa-bars'></i>
</label>
<section>
<nav class="sideNav" id="mySidenav">
<a href="#" class="closebtn" id="closebtn" onclick="closeNav()">✖</a>
<div class="header">
CodingLabs
</div>
<div class="menu">
<ul>
<li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
<li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
<li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
<li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
<li><a href="#"><i class="fas fa-question-circle"></i>About</a></li>
<li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
<li><a href="#"><i class="fas fa-phone-volume"></i>Contact</a></li>
<li><a href="#"><i class="far fa-comments"></i>Feedback</a></li>
</ul>
</div>
</nav>
</section>