I am newbie in web desgin and css, and I need to make the scroll of sidebar div on the right side not left side
The HTML Direction is from Right to Left
I do not want Sidebar on left but only Scroll not Sidebar itself
I tried but I cannot get any solution, I am tried to use overflow-y and overflow-x but not work
* {
margin: 0;
padding: 0;
}
body {
font-family: "Poppins", sans-serif;
font-size: 16px;
color: #1a1a1a;
}
.sidebar-link {
text-decoration: none !important;
}
.sidebar-link:hover {
text-decoration: none !important;
}
.sideBar li {
list-style-type: none;
margin-bottom: 0px;
}
.bg-color-colapse {
background-color: #575fcf !important;
}
.main-nav-bar-height {
height: 60px;
background-color: #273c75 !important;
}
.sideBar {
z-index: 1000;
background: #273c75;
position: fixed;
top: 10px;
left: auto;
padding: 40px 30px;
box-shadow: 0 10px 20px #00000030;
border-radius: 10px;
max-height: 1000px;
width: 120px;
display: flex;
flex-direction: column;
transition: width 0.2s ease;
overflow-y: scroll;
overflow-x: hidden;
}
.sideBar .navLinks {
width: 100%;
}
.sideBar .navLinks li {
border-radius: 15px;
padding: 5px;
}
.sideBar .navLinks li a {
padding-right: 15px;
}
.sideBar .link {
display: flex;
height: 30px;
}
.sideBar .link-text {
color: #fff;
font-weight: 600;
font-size: 16px;
transform: scaleX(0);
transform-origin: right;
transition: all 0.2s ease;
font-family: CairoFont;
}
.sideBar .link-icon {
color: #fff;
flex-basis: 30px;
font-size: 21px;
margin-left: 15px;
}
.sideBar .text-muted {
color: #ccc;
font-size: 21px;
padding: 10px 0px;
font-family: CairoFont;
}
.sideBar .navLinks li:hover {
background: #fff;
}
.sideBar .navLinks li:hover .link > * {
color: #2C3A47;
}
.sideBar:hover .link-text {
transform: scaleX(1);
}
.sideBar:hover {
width: 280px;
align-items: flex-start;
}<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<nav class="sideBar">
<p class="text-muted">Test</p>
<ul class="navLinks">
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 1</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 2</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 3</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 4</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 5</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 6</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 7</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 8</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 9</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 10</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 11</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 12</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 13</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 14</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 15</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 16</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 17</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 18</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 19</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 20</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 21</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 22</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 23</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 24</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 25</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 26</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 27</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 28</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 29</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 30</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 31</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 32</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 33</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 34</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 35</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 36</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 37</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 38</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 39</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 40</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 41</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 42</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 43</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 44</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 45</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 46</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 47</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 48</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 49</span>
</a>
</li>
<li>
<a href="#" class="link sidebar-link">
<span class="link-text">Text Link 50</span>
</a>
</li>
</ul>
</nav>
<main>
</main>
</body>
</html>
You need to sign in to view this answers
Leave feedback about this