We Keep Coding

problem with the sidebar. sidebar is not closing

for some reason the close button on the sidebar is not showing nor working, the show sidebar works perfectly fine however the closing function is not working. im providing the html, css ans javascript related to the close function
here's my html:
<aside class="sidenav">
<div class="sidenav__close-icon">
<i class="bi bi-x-lg"></i>
</div>
<img class="sidenav__logo" src="../static/img/ManageX5.png">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
</li>
</ul>
<ul class="sidenav__logout">
<li class="list-logout-item">
<a class="sidenav__list-item-logout" href="#">logout</a>
</li>
</ul>
</aside>
this is the JS part:
const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');
/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}
}
/*===== Open the side nav on click =====*/
menuIconEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function() {
toggleClassName(sidenavEl, 'active');
});
and this is the css related to the sidebar:
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}

The reason of why you can't see the close icon isn't showing up is that you don't have the necessary styles that makes the element (.sidenav__close-icon) to be rendered/shown as an icon.
If you have it somewhere in your project, I suggest you making some tweaks like the following:
You can use jQuery's toggleClass method to toggle a class
function toggleClassName(el, className) {
el.toggleClass(className);
}
The close button/icon has CSS properties (position, top, right) that makes it positioned to top right of the page which results in not visible. You may have to add the following CSS in order to give close icon a relative position. In your case, the relativity can be inherited from its parent, the .sidenav element.
.sidenav {
position: relative;
width: 200px;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
Here's a snippet which toggles active class and demonstrates the change
const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');
/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
el.toggleClass(className);
// Much shorter, but the following lines can also work
/*if (el.hasClass(className)) {
el.removeClass(className);
} else {
el.addClass(className);
}*/
}
/*===== Open the side nav on click =====*/
menuIconEl.on('click', function () {
toggleClassName(sidenavEl, 'active');
});
/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function () {
toggleClassName(sidenavEl, 'active');
});
.sidenav {
position: relative;
width: 200px;
}
.sidenav__close-icon {
position: absolute;
visibility: visible;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
color: #000;
}
.active {
outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="sidenav">
<div class="sidenav__close-icon">
<i class="bi bi-x-lg">X</i>
</div>
<img class="sidenav__logo" src="../static/img/ManageX5.png">
<ul class="sidenav__list">
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
</li>
<li class="sidenav__list-item">
<a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
</li>
</ul>
<ul class="sidenav__logout">
<li class="list-logout-item">
<a class="sidenav__list-item-logout" href="#">logout</a>
</li>
</ul>
</aside>

Make the background image of class to be slideshow

I have class that have background image and this background image have fixed navbar and some text on it. How can I make this background image to be slideshow with another two images. Can someone help me with this without damaging the fixed navbar and the text on it?
Here is my codes
<div id="home" class="intro route bg-image" >
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll" href="#page-top"><%= image_tag "logo.png",class: "logo",alt: "eric chism trail to welness logo" %></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault"
aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#service">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#work">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="overlay-itro"></div>
<div class="intro-content display-table">
<div class="table-cell">
<div class="container">
<h1 class="intro-title mb-4">Eric Chism Trail to Wellness</h1>
<p class="intro-subtitle"> provides a customized journey to complete health and wellness</span><strong class="text-slider"></strong></p>
<!-- <p class="pt-3"><a class="btn btn-primary btn js-scroll px-4" href="#about" role="button">Learn More</a></p> -->
</div>
</div>
</div>
</div>
css file
.intro {
height: 100vh;
position: relative;
color: #fff;
background-image: url(asset-path("attachment_1550437745.png"));
}
.intro .intro-content {
text-align: center;
position: absolute;
}

I have created a very raw, pure CSS solution, as good starting point for you. Using different animations and delays you could achieve some really awesome effects.
body {
margin: 0;
padding: 0;
}
.route {
height: 100vh;
position: relative;
color: #fff;
}
.navbar {
position: fixed;
}
.slide {
position: relative;
height: 100%;
width: 33.33%;
margin: 0;
float: left;
}
.slide-1 {
background-image: url(https://picsum.photos/1200/800?image=11);
}
.slide-2 {
background-image: url(https://picsum.photos/1200/800?image=12);
}
.slide-3 {
background-image: url(https://picsum.photos/1200/800?image=13);
}
.slideshow {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 0;
overflow: hidden;
color: #000;
}
.slideshow-inner {
position: relative;
height: 100%;
width: 300%;
animation: move 20s ease infinite;
}
.intro .intro-content {
text-align: center;
position: absolute;
}
#keyframes move {
0% {
transform: translate(0, 0);
}
33.33% {
transform: translate(-33.33%, 0);
}
66.66% {
transform: translate(-66.66%, 0);
}
}
<div id="home" class="route bg-image">
<div class="slideshow">
<div class="slideshow-inner">
<div class="slide slide-1"><span>Some Text</span></div>
<div class="slide slide-2"><span>Some Text</span></div>
<div class="slide slide-3"><span>Some Text</span></div>
</div>
</div>
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container">
<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#service">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#work">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>

Presumably you mean a time-based slideshow rather than one where the user presses buttons. The various options are all typically handled with JavaScript. As your background element has children, I would extend your existing code by adding new classes corresponding to new background images, and switching between them.
.bg1 {
background-image: url(asset-path("img1.png"));
}
.bg2 {
background-image: url(asset-path("img2.png"));
}
.bg3 {
background-image: url(asset-path("img3.png"));
}
Then add the first class to your background element:
<div id="home" class="intro route bg-image bg1" >
and include JS code to cycle through the classes, like below - included as part of a snippet so you can see the effect.
function updateSlide() {
const bgCount = 3; //This needs to match the number of background classes - main weakness of this snippet
const bgElem = document.getElementById('home'); // Background element
let foundClasses = []; //List of background classes found
let bgIndex = 0;
for(let classIndex = 0; classIndex < bgElem.classList.length; classIndex++) { // Using a full for in case the element somehow gets multiple background classes
const thisClass = bgElem.classList.item(classIndex);
if(thisClass.substr(0, 2) == 'bg') {
foundClasses += thisClass;
bgIndex = parseInt(thisClass.substr(2)) + 1;
}
}
if(bgIndex > bgCount) {
bgIndex = 1;
}
bgElem.classList.add('bg' + bgIndex); //Apply the new class
bgElem.classList.remove(foundClasses); //Remove all previous background classes
}
setInterval(updateSlide, 2000); // Change every 2 seconds
#home {
display: block;
}
.bg1 {
background: red;
}
.bg2 {
background: yellow;
}
.bg3 {
background: green;
}
<div id="home" class="bg1">Test</div>
Long-term, you would want the cycling script to get its background-count from a Rails variable or the HTML instead of a hard-coded value.

Stack inner anchor tag on top of nav

I have an anchor tag with a hamburger style css that toggles a fly-out menu. The thing I am stuck at is that I always want it to stay on top however at present the flyout menu goes over the anchor hamburger and hides it. The flyout menu has the class called nav-container any help is welcome here as I have tried to solve this for a few hours. Thanks in advance.
HTML -
<div class="container">
<nav id="main-nav" class="hc-nav hc-nav-1">
<ul>
<li class="Test page">
Test page
<ul>
<li class="nav-has-sub">
Sub test page
<ul>
<li>
Sub sub test page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<a class="toggle">
<span></span>
</a>
</div>
Flyout HTML -
<div class="nav-container" style="">
<div class="nav-wrapper nav-wrapper-0">
<div class="nav-content">
<ul>
<li class="nav-close"><span></span></li>
<li><a class="toggle toggle-open hc-nav-trigger hc-nav-1 nav-item" style="top:-25px;left:10px">
<span></span>
</a>
</li>
</ul>
<ul>
<li class="Test page nav-parent">
<input type="checkbox" id="hc-nav-1-1-0" data-level="1" data-index="0" value="n83m4ogohw-gjximxnm4rq">Test page<span class="nav-next"><label for="hc-nav-1-1-0"></label></span>
<div class="nav-wrapper nav-wrapper-1">
<div class="nav-content">
<h2>Test page</h2>
<ul style="text-indent: 40px;">
<li class="nav-has-sub nav-parent">
<input type="checkbox" id="hc-nav-1-2-0" data-level="2" data-index="0" value="vjoqryeoc9-trdi4kvf59">level 2.1<span class="nav-next"><label for="hc-nav-1-2-0"></label></span>
<div class="nav-wrapper nav-wrapper-2">
<div class="nav-content">
<h2>level 2.1</h2>
<ul style="text-indent: 80px;">
<li>level 3</li>
</ul>
</div>
</div>
</li>
<li>level 2.2</li>
</ul>
</div>
</div>
</li>
</ul>
<ul>
<li class="Another top level">Another top level</li>
</ul>
</div>
</div>
</div>
CSS
.toggle
{
position: absolute;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
top: 20px;
z-index: 9980;
width: 35px;
min-height: 24px;
width: auto;
left: auto;
float: left;
display: block;
cursor: pointer;
box-sizing: content-box;
font-size: 20px;
padding-left: 55px;
line-height: 24px;
margin-top: 0
}
.nav-container {
position: fixed;
z-index: 9998;
top: 0;
width: 350px;
height: auto;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
transition: transform .4s ease;
padding-bottom: 450px;
}

It was a very simple case of giving the class .nav-container a z-index:0
Thanks everyone for posting.

how to change height specific div when scroll inside this div

I need help in JS :
I have page with div class .maincom inside with overlay-y: scroll. I want to scroll this div, and when scrolling I want to change height of div class .maincom from 160 to 350 .
Important: I don't want to change height of this div when I'm scrolling entire site (window). I want to change this height ONLY when I'm scrolling this div class .maincom .
Example code:
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>
CSS:
.maincom {
position: fixed;
background-color: white;
width: 100%;
bottom: 0px;
right: 0px;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}
Div "maincom" is overlay-y:scroll, with height: 160px . I'm searching for solution: when maincom is scrolled down, then height will be 350px . When scrolled up, height will be back as 160px
This isn't working correctly :
$(".maincom").on("scroll", function () {
var scrollTop = $(".maincom").scrollTop();
if (scrollTop > 100) {
$(".maincom").stop().animate({height: "160px"},200);
}
else {
$(".maincom").stop().animate({height: "350px"},200);
}
});
Any other solutions? :)
First step is completed now. here is the second/last one:
Update: Solution from Lime In The Coconut working fully great. Thanks a lot ! Now I have one more thing:
Example code 2:
<div class="reward">You can win 50 points for that</div>
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>
and code for .reward class div:
.reward{
position: fixed;
background-color: white;
width: 100%;
bottom: 140px;
right: -20px;
height: 64px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 20px;
z-index: 5;
background-color: #0077dd;
color: white;
font-size: 10px;
opacity: 0.8;
}
And now: how to set JS - if .maincom is scrolled down (then height of .maincom increased) , bottom of .reward is increased from 140px to 300px .
if You know solution for that too, You are the best ! :)
Thanks !
Peter

try this, i have inserted more list elements in order to see the effects
let maincom = document.querySelector('.maincom')
maincom.addEventListener('scroll',function(){
if(this.scrollTop>0){
this.style.height ="360px"
}
if(this.scrollTop === 0){
this.style.height = '160px'
}
})
.maincom {
position: fixed;
background-color: red;
width: 100%;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
</ul>
<h2>Your comment</h2>
<form>...</form>
</div>

How can I move an absolute positioned element if out of viewport?

I have many boxes with differents widths. All of them are displayed inline-block so they will be distributed differently as window width changes.
Every box has a big tooltip that will show on hover. These tooltips have a fixed width and height, same for all of the boxes.
These tooltips are position:absolute over the boxes and centered with:
left: 50%;
margin-left: -halfwidth;
My problem is that if the box is close to window left or right they will be partially hidden (I have no problem with top and bottom, they will never reach those edges)
Is there any easy way with javascript (better if jquery) to detect when the element is out of the viewport and then change the left property accordingly to prevent it?
any help, hint or comment will be greatly apreciated. Thank You
JSFIDDLE
html, body {margin:0;padding:0;height:100%;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>

Thats all you need, i detected the offset left position of the div, and added the class to li and a small tweaks in css.
$("li").mouseenter(function(){
var f = $(this).find('.hover-element');
var rightEdge = f.width() + f.offset().left;
var leftEdge = f.offset().left;
var screenWidth = $(window).width();
if(leftEdge < 0){
$(this).addClass("left");
$(this).removeClass("right");
}
else if(rightEdge > screenWidth){
$(this).addClass("right");
$(this).removeClass("left");
}
else{
$(this).removeClass("right lefft");
}
});
$("li").mouseleave(function(){
$(this).removeClass("right lefft");
})
html, body {margin:0;padding:0;height:100%;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li.left .hover-element{
left: 0;
margin-left: 0;
}
li.right .hover-element{
margin-left: 0;
left: auto;
right: 0;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>

Have a look:
var windowWidth = document.body.scrollWidth || window.innerWidth;
$('li').on('mouseenter', function(e){
var $hover = $(this).find('.hover-element');
var coords = $hover[0] && $hover[0].getBoundingClientRect();
var rightDistance = 0;
if (coords.left <= 0) {
$hover.css({
'left': ($hover.css('left').split('px')[0] - coords.left) + 'px'
})
}
rightDistance = windowWidth - coords.left - $hover.width() - 2 * $hover.css('borderWidth').split('px')[0];
if (rightDistance < 0) {
$hover.css({
'left': ($hover.css('left').split('px')[0] - (-rightDistance)) + 'px'
})
}
$('p').html($hover.css('left') + '/' + coords.left)
})
html, body {margin:0;padding:0;height:100%;overflow-x: hidden;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>

The following links are a starting point for your question (if not the actual answer).
Is there any easy way with javascript (better if jquery) to detect when the element is out of the viewport and then change the left property accordingly to prevent it?
How to tell if a DOM element is visible in the current viewport?
Absolute position of an element on the screen using jQuery

I'm going to mention the steps here. If you'd need the code, just ask for it. I am currently on my mobile device, so typing the code would get hard!
Steps
To make things easy to include JS, change the display property using JS. Accomplish this using a mouse event on each of the list items, that changes their respective tooltip's display property. (Here's how to access the respective child)
In the same hover event, do these:
After changing the display, check if the tooltip element is in viewport. You can refer to the link Victor Medeiros provided.
If is not completely in viewport, change the margin-left property to -175px - (the number of pixels it crossed the boundary by). I just realised, if it crosses the viewport, just set the margin-left or margin-right (as applicable, find it by getBoundingClientRect) to 0.
Yep, that's it! I hope that should work, I haven't tried it out. What's the result?

Change
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
Whit
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: static;
}