Navbar is jumping to new line, as I close it

Issue

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()">&#10006;</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>

this is navbar opened

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: wrap can 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()">&#10006;</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>

Answered By - Naren Murali