Text-align transiton when resizing window - html

Question

I have this Mobile-Navigation (Press Full page and resize your window to see the effect when the navigation is opened):
let responsiveNav = document.getElementById("responsiveNav");
let responsiveNavDarkBackground = document.getElementById("responsiveNavDarkBackground");
function openResponsiveNav() {
responsiveNav.style.right = "0";
responsiveNavDarkBackground.style.background = "rgba(0,0,0,0.5)";
responsiveNavDarkBackground.style.zIndex = "9998";
}
function closeResponsiveNav() {
responsiveNav.style.right = "-100%";
responsiveNavDarkBackground.style.background = "rgba(0,0,0,0)";
responsiveNavDarkBackground.style.zIndex = "-1";
}
window.onclick = function(event) {
if (event.target === responsiveNavDarkBackground) {
closeResponsiveNav();
}
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.bi-list {
font-size: 50px;
float: right;
cursor: pointer;
}
/* Navigation */
/* Mobile Version */
#responsiveNavDarkBackground {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0);
z-index: -1;
transition: all 0.5s;
}
#responsiveNav {
position: fixed;
right: -100%;
top: 0;
z-index: 9999;
height: 100%;
width: 100%;
background: #F5C152;
transition: all 0.5s;
}
#responsiveNavHeader {
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
#responsiveNav #responsiveNavHeader img {
height: 35px;
}
#responsiveNavHeader #closeResponsiveNav {
font-size: 25px;
cursor: pointer;
}
#responsiveNav ul {
list-style: none;
text-align: center;
}
#responsiveNav ul li {
font-size: 1.2em;
padding: 1em;
transition: all 0.1s;
color: #fff;
}
#responsiveNav ul li:hover {
background: #c69943;
cursor: pointer;
}
#responsiveNav ul li:active {
background: #a78139;
cursor: pointer;
}
/* Desktop Version */
#media screen and (min-width: 600px){
#responsiveNavDarkBackground {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0);
z-index: -1;
transition: all 0.5s;
}
#responsiveNav {
position: fixed;
right: -600px;
top: 0;
z-index: 9999;
height: 100%;
width: 400px;
background: #F5C152;
box-shadow: 0 0 15px 10px #5d5d5d;
transition: all 0.5s;
}
#responsiveNavHeader {
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
#responsiveNav #responsiveNavHeader img {
height: 35px;
}
#responsiveNavHeader #closeResponsiveNav {
font-size: 25px;
cursor: pointer;
}
#responsiveNav ul {
list-style: none;
text-align: right;
transition: all 0.3s;
}
#responsiveNavul:hover > li {
width: 0;
}
#responsiveNav ul li {
font-size: 1.2em;
padding: 1em;
transition: all 0.1s;
color: #fff;
}
#responsiveNav ul li:hover {
background: #c69943;
cursor: pointer;
}
#responsiveNav ul li:active {
background: #a78139;
cursor: pointer;
}
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<i class="bi bi-list" onclick="openResponsiveNav();"></i>
<div id="responsiveNavDarkBackground">
<div id="responsiveNav">
<div id="responsiveNavHeader">
<h1>Menu</h1>
<i class="bi bi-x-lg" id="closeResponsiveNav" onclick="closeResponsiveNav();"></i>
</div>
<ul>
<li class="responsiveNavItem">Home</li>
<li class="responsiveNavItem">Menu</li>
<li class="responsiveNavItem">Our Story</li>
<li class="responsiveNavItem">Contact Us</li>
</ul>
</div>
</div>
Everything works perfectly but with one problem and that is the text alignment. If the navigation is on a large screen and is on the right side then it gets a text-align: right; property. If the screen is smaller and covers the whole screen then it gets a text-align: center;. How can I make it so that when I resize the screen that the text-alignment has a transition?
Before this question gets flagged for a duplicitous reason, I have seen this question: Is it possible to transition text-alignment using CSS3 only? , but it did not help

Answer 1

the linked answer was what you needed, but with addition: direction: rtl; so text overflow to the left and wrapping elements with span to avoid messing with hover effects.
let responsiveNav = document.getElementById("responsiveNav");
let responsiveNavDarkBackground = document.getElementById("responsiveNavDarkBackground");
function openResponsiveNav() {
responsiveNav.style.right = "0";
responsiveNavDarkBackground.style.background = "rgba(0,0,0,0.5)";
responsiveNavDarkBackground.style.zIndex = "9998";
}
function closeResponsiveNav() {
responsiveNav.style.right = "-100%";
responsiveNavDarkBackground.style.background = "rgba(0,0,0,0)";
responsiveNavDarkBackground.style.zIndex = "-1";
}
window.onclick = function(event) {
if (event.target === responsiveNavDarkBackground) {
closeResponsiveNav();
}
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.bi-list {
font-size: 50px;
float: right;
cursor: pointer;
}
/* Navigation */
#responsiveNavDarkBackground {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0);
z-index: -1;
transition: all 0.5s;
}
#responsiveNav {
position: fixed;
right: -100%;
top: 0;
z-index: 9999;
height: 100%;
width: 100%;
background: #F5C152;
transition: all 0.5s;
}
#responsiveNavHeader {
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
#responsiveNav #responsiveNavHeader img {
height: 35px;
}
#responsiveNavHeader #closeResponsiveNav {
font-size: 25px;
cursor: pointer;
}
#responsiveNav ul {
list-style: none;
text-align: right;
}
#responsiveNav ul li {
font-size: 1.2em;
padding: 1em;
transition: all 0.1s;
color: #fff;
}
#responsiveNav ul li:hover {
background: #c69943;
cursor: pointer;
}
#responsiveNav ul li:active {
background: #a78139;
cursor: pointer;
}
.responsiveNavItem > span{
display: inline-block;
text-align: center;
white-space: nowrap;
width: 100%;
overflow: visible;
direction: rtl;
transition: all 1.5s ease;
}
#media screen and (min-width: 600px){
.responsiveNavItem > span{
width: 0;
}
#responsiveNavDarkBackground {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0);
z-index: -1;
transition: all 0.5s;
}
#responsiveNav {
position: fixed;
right: -600px;
top: 0;
z-index: 9999;
height: 100%;
width: 400px;
background: #F5C152;
box-shadow: 0 0 15px 10px #5d5d5d;
transition: all 0.5s;
}
#responsiveNavHeader {
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
#responsiveNav #responsiveNavHeader img {
height: 35px;
}
#responsiveNavHeader #closeResponsiveNav {
font-size: 25px;
cursor: pointer;
}
#responsiveNav ul {
list-style: none;
/*text-align: right;*/
transition: all 0.3s;
}
#responsiveNavul:hover > li {
width: 0;
}
#responsiveNav ul li {
font-size: 1.2em;
padding: 1em;
transition: all 0.1s;
color: #fff;
}
#responsiveNav ul li:hover {
background: #c69943;
cursor: pointer;
}
#responsiveNav ul li:active {
background: #a78139;
cursor: pointer;
}
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<i class="bi bi-list" onclick="openResponsiveNav();"></i>
<div id="responsiveNavDarkBackground">
<div id="responsiveNav">
<div id="responsiveNavHeader">
<h1>Menu</h1>
<i class="bi bi-x-lg" id="closeResponsiveNav" onclick="closeResponsiveNav();"></i>
</div>
<ul>
<li class="responsiveNavItem"><span>Home</span></li>
<li class="responsiveNavItem"><span>Menu</span></li>
<li class="responsiveNavItem"><span>Our Story</span></li>
<li class="responsiveNavItem"><span>Contact Us</span></li>
</ul>
</div>
</div>

Answer 2

the problem is in the line 58 in your CSS:
#responsiveNav ul {
list-style: none;
text-align: center;
}
Change it to:
#responsiveNav ul {
list-style: none;
text-align: right;
}