I’m beginner in net desgin and css, and I have to make the scroll of sidebar div on the best facet not left facet
The HTML Path is from Proper to Left
I don’t need Sidebar on left however solely Scroll not Sidebar itself
I attempted however I can’t get any resolution, I’m tried to make use of overflow-y and overflow-x however not work
* {
margin: 0;
padding: 0;
}
physique {
font-family: "Poppins", sans-serif;
font-size: 16px;
coloration: #1a1a1a;
}
.sidebar-link {
text-decoration: none !essential;
}
.sidebar-link:hover {
text-decoration: none !essential;
}
.sideBar li {
list-style-type: none;
margin-bottom: 0px;
}
.bg-color-colapse {
background-color: #575fcf !essential;
}
.main-nav-bar-height {
top: 60px;
background-color: #273c75 !essential;
}
.sideBar {
z-index: 1000;
background: #273c75;
place: mounted;
prime: 10px;
left: auto;
padding: 40px 30px;
box-shadow: 0 10px 20px #00000030;
border-radius: 10px;
max-height: 1000px;
width: 120px;
show: 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 .hyperlink {
show: flex;
top: 30px;
}
.sideBar .link-text {
coloration: #fff;
font-weight: 600;
font-size: 16px;
rework: scaleX(0);
transform-origin: proper;
transition: all 0.2s ease;
font-family: CairoFont;
}
.sideBar .link-icon {
coloration: #fff;
flex-basis: 30px;
font-size: 21px;
margin-left: 15px;
}
.sideBar .text-muted {
coloration: #ccc;
font-size: 21px;
padding: 10px 0px;
font-family: CairoFont;
}
.sideBar .navLinks li:hover {
background: #fff;
}
.sideBar .navLinks li:hover .hyperlink > * {
coloration: #2C3A47;
}
.sideBar:hover .link-text {
rework: scaleX(1);
}
.sideBar:hover {
width: 280px;
align-items: flex-start;
}<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<title>Check</title>
</head>
<physique>
<nav class="sideBar">
<p class="text-muted">Check</p>
<ul class="navLinks">
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 1</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 2</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 3</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 4</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 5</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 6</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 7</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 8</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 9</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 10</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 11</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 12</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 13</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 14</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 15</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 16</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 17</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 18</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 19</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 20</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 21</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 22</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 23</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 24</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 25</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 26</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 27</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 28</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 29</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 30</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 31</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 32</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 33</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 34</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 35</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 36</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 37</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 38</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 39</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 40</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 41</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 42</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 43</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 44</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 45</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 46</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 47</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 48</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 49</span>
</a>
</li>
<li>
<a href="#" class="hyperlink sidebar-link">
<span class="link-text">Textual content Hyperlink 50</span>
</a>
</li>
</ul>
</nav>
<predominant>
</predominant>
</physique>
</html>
