1

how can i make the sidebar footer static and elements of sidebar nav scrollable?

I tried several ways though. One is overflow:auto;. But it didn't work . So what i basically want is static sidebar-footer and elements of sidebar nav scrollable.

.sidebar{
  display: block;
  position: fixed;
  height: calc(100vh - 50px);
  top: 51.5px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  z-index: 0;
  transition: all 0.5s ease;
}
.open.sidebar {
  display: block;
}
#mySidebar{
  transition:all 0.2s linear;
  /*transform:translateX(-250px);*/
}
#mySidebar.open{
  transform:translateX(0);
}
.sidebar-header{
  padding: 0px;
  width: 100%;
  background: rgba(0, 136,169, 1);
  height: 3rem;
}
.sidebar-header .profile{
  display:  flex;
  color: #fff;
}
.profile .profile-image img{
  flex-wrap: wrap;
  pointer-events: none;
  border-radius: 50%;
  width: 40px;
  float: none;
  display: block;
  object-fit: fill;
  height: 40px;
  margin-left:  20px;
}
.profile .profile-name{
  display: inline-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px 0 5px;
  font-size: 14px;
  font-weight: 600 !important;
}
.profile .profile-name i{
  margin: -2px 5px 0 2px;
  font-size: 16px;
}
.profile-stats{
  margin: 10px 0;
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  gap:  0.25rem;
  align-items: center;
  cursor: pointer;
}
.profile-stats .stats{
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}
#followerCount, #mediaCount,#followingCount{
  font-size: 10px;
}
.sidebar-nav{
margin: -0.5rem 0;
overflow: auto;
}
.sidebar-nav ul {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style:none;
    padding: 0 15px;
    line-height: 30px;
    overflow:auto;
}
.sidebar-nav ul li{
    width:100%;
    color:#007bff;
    padding:  5px 10px;
    margin: 1px 0;
}
.sidebar-nav ul li a{
    text-decoration:none;
}
.sidebar-nav ul .active,
.sidebar-nav ul .active a .icon{
    background:#007bff;
    color: #ffffff;
    border-radius: 10px;
}

.sidebar-nav ul li:hover,
.sidebar-nav ul li:hover a .icon, 
.sidebar-nav ul li:hover a{
    background:#007bff;
    color: #ffffff;
    border-radius: 10px;
}
.sidebar-nav ul li a .icon{
  color:#007bff;
  width:30px;
  display: inline-block;
}
.sidebar-nav .sidebar-nav-header{
  text-transform: uppercase;
  font-size: 11px;
  margin: -0.75rem 1.5rem;
  color:#0c7db1;
}
.sidebar-footer{
  position: absolute;
  bottom:  0;
  background: #FF7F50;
  width: 100%;
  height:  3rem;
  text-align: center;
}
.sidebar-footer span a{
  display: block;
  position: absolute;
  color: #fff;
  background: #FF7F50;
  font-weight:  600 !important;
  margin-top: 5%;
  margin-left: 70px;
  text-decoration:none;
}
.sidebar-footer span i{
  width: 30px;
  font-size: 16px;
}
<div class="sidebar" id='mySidebar'>
    <div class="sidebar-header">
        <div class="profile">
            <div class="profile-image">
                <img src="data:image/png;base64,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">
            </div>
            <div class="profile-name">
                <i class="fas fa-chess-pawn"></i><span>Umann Goswami</span>
            </div>
        </div>
        
    </div><!--sidebar-header-->
    <div class="sidebar-nav">
        <ul>
            <li class="active"><a href=""><span class="icon"><i class="fas fa-home"></i></span>Home</a></li>
             
             <li><a href=""><span class="icon"><i class="fas fa-chart-bar"></i></span>Feed</a></li>

             <li><a href=""><span class="icon"><i class="fas fa-pen-nib"></i></span>Posts</a>
             </li>
             
             <li><a href=""><span class="icon"><i class="fas fa-file-alt"></i></span>Categories</a></li>

             <li><a href=""><span class="icon"><i class="far fa-comments"></i></span>Comments</a></li>

             <li><a href=""><span class="icon"><i class="fas fa-cog"></i></span>Settings</a></li>
        </ul>
        <div class="sidebar-nav-header">
           Admin
        </div>
            <ul>
                <li><a href=""><span class="icon"><i class="fas fa-users"></i></span>Users</a></li>

            </ul>
        <div class="sidebar-nav-header">
            Profile
        </div>

        <ul>
            <li><a href=""><span class="icon"><i class="fas
             fa-user"></i></span>View</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-user-edit"></i></span>Edit</a></li>
        </ul>

        <div class="sidebar-nav-header">
            Analysis
        </div>
        
        <ul>
            <li><a href=""><span class="icon"><i class="fas
             fa-user"></i></span>View</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-user-edit"></i></span>Edit</a></li>
        </ul>
    </div><!--sidebar-nav-->
    <div class="sidebar-footer">
        <span><a href=""><i class="fas fa-power-off"></i>Logout</span></a>
    </div>
</div><!--sidebar-->
James Z
  • 12,209
  • 10
  • 24
  • 44
  • static has a different meaning in CSS. so what do you mean by static? and they are all scrollable now but horizontally, so again, what do you mean scrollable? – Mad7Dragon Oct 16 '22 at 11:56
  • Static means fixed and scrollable means displaying the overflow elements moving in y direction go from top to bottom keeping the footer of sidebar fixed in its place –  Oct 16 '22 at 12:05
  • I updated the height should be 90% considering your footer height so no elements in the list will hide behind it. so don't forget to manage that if you edit footer height. and don't forget to mark it as an accepted answer. – Mad7Dragon Oct 16 '22 at 12:30

2 Answers2

1

Just define a height for the .sidebar-nav and set it to 90% and keep its overflow to auto.

.sidebar{
  display: block;
  position: fixed;
  height: calc(100vh - 50px);
  top: 51.5px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  z-index: 0;
  transition: all 0.5s ease;
}
.open.sidebar {
  display: block;
}
#mySidebar{
  transition:all 0.2s linear;
  /*transform:translateX(-250px);*/
}
#mySidebar.open{
  transform:translateX(0);
}
.sidebar-header{
  padding: 0px;
  width: 100%;
  background: rgba(0, 136,169, 1);
  height: 3rem;
}
.sidebar-header .profile{
  display:  flex;
  color: #fff;
}
.profile .profile-image img{
  flex-wrap: wrap;
  pointer-events: none;
  border-radius: 50%;
  width: 40px;
  float: none;
  display: block;
  object-fit: fill;
  height: 40px;
  margin-left:  20px;
}
.profile .profile-name{
  display: inline-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px 0 5px;
  font-size: 14px;
  font-weight: 600 !important;
}
.profile .profile-name i{
  margin: -2px 5px 0 2px;
  font-size: 16px;
}
.profile-stats{
  margin: 10px 0;
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  gap:  0.25rem;
  align-items: center;
  cursor: pointer;
}
.profile-stats .stats{
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}
#followerCount, #mediaCount,#followingCount{
  font-size: 10px;
}
.sidebar-nav{
margin: -0.5rem 0;
overflow: auto;
height: 90%;

/* border: 1px solid red; */
}
.sidebar-nav ul {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style:none;
    padding: 0 15px;
    line-height: 30px;
    overflow:auto;

    
}
.sidebar-nav ul li{
    width: 90%;
    color:#007bff;
    padding:  5px 10px;
    margin: 1px 0;
}
.sidebar-nav ul li a{
    text-decoration:none;
}
.sidebar-nav ul .active,
.sidebar-nav ul .active a .icon{
    background:#007bff;
    color: #ffffff;
    border-radius: 10px;
}

.sidebar-nav ul li:hover,
.sidebar-nav ul li:hover a .icon, 
.sidebar-nav ul li:hover a{
    background:#007bff;
    color: #ffffff;
    border-radius: 10px;
}
.sidebar-nav ul li a .icon{
  color:#007bff;
  width:30px;
  display: inline-block;
}
.sidebar-nav .sidebar-nav-header{
  text-transform: uppercase;
  font-size: 11px;
  margin: -0.75rem 1.5rem;
  color:#0c7db1;
}
.sidebar-footer{
  position: absolute;
  bottom:  0;
  background: #FF7F50;
  width: 100%;
  height:  3rem;
  text-align: center;
}
.sidebar-footer span a{
  display: block;
  position: absolute;
  color: #fff;
  background: #FF7F50;
  font-weight:  600 !important;
  margin-top: 5%;
  margin-left: 70px;
  text-decoration:none;
}
.sidebar-footer span i{
  width: 30px;
  font-size: 16px;
}
<div class="sidebar" id='mySidebar'>
    <div class="sidebar-header">
        <div class="profile">
            <div class="profile-image">
                <img src="data:image/png;base64,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">
            </div>
            <div class="profile-name">
                <i class="fas fa-chess-pawn"></i><span>Umann Goswami</span>
            </div>
        </div>
        
    </div><!--sidebar-header-->
    <div class="sidebar-nav">
        <ul>
            <li class="active"><a href=""><span class="icon"><i class="fas fa-home"></i></span>Home</a></li>
             
             <li><a href=""><span class="icon"><i class="fas fa-chart-bar"></i></span>Feed</a></li>

             <li><a href=""><span class="icon"><i class="fas fa-pen-nib"></i></span>Posts</a>
             </li>
             
             <li><a href=""><span class="icon"><i class="fas fa-file-alt"></i></span>Categories</a></li>

             <li><a href=""><span class="icon"><i class="far fa-comments"></i></span>Comments</a></li>

             <li><a href=""><span class="icon"><i class="fas fa-cog"></i></span>Settings</a></li>
        </ul>
        <div class="sidebar-nav-header">
           Admin
        </div>
            <ul>
                <li><a href=""><span class="icon"><i class="fas fa-users"></i></span>Users</a></li>

            </ul>
        <div class="sidebar-nav-header">
            Profile
        </div>

        <ul>
            <li><a href=""><span class="icon"><i class="fas
             fa-user"></i></span>View</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-user-edit"></i></span>Edit</a></li>
        </ul>

        <div class="sidebar-nav-header">
            Analysis
        </div>
        
        <ul>
            <li><a href=""><span class="icon"><i class="fas
             fa-user"></i></span>View</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-user-edit"></i></span>Edit</a></li>
        </ul>
    </div><!--sidebar-nav-->
    <div class="sidebar-footer">
        <span><a href=""><i class="fas fa-power-off"></i>Logout</span></a>
    </div>
</div><!--sidebar-->

Edit: regarding your comments:

@techieafrohead the question was about making the footer fixed and the lists scrollable. and my first answer delivered that. however, these issue happens because of your HTML structure and the way you position them together using fixed and absolute. also if you use a fixed element, then you should measure and calculate all other related elements to it because the fixed element is related to the browser viewport only and you can't set it related to other elements and that's why fixed position is only used for fixed header or chat button or similar situation where fixed is the best position for it.

however, I tried to fix your issues for hours actually, but couldn't then I built a similar layout from scratch. check it out and tell me if this is what you want:

body {
  display: flex;
  align-items: center;
  position: relative;
}

.side-container {
  /* border: 1px dashed; */
  position: fixed;
  height: calc(95% - 0);
  top: 50px;
  left: 0;
  bottom: 50px;
  width: 15rem;
  overflow: auto;

  display: flex;
  flex-direction: column;
}

.side-inner-container {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.header {
  background: lightseagreen;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  text-align: center;
  margin: auto;
  width: 240px;
  position: fixed;
  top: 0;
  left: 0;

}
.nav {
  background: lightslategray;
  height: 100%;
  width: 100%;
  overflow: auto;

}
.footer {
  background: lightcoral;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  text-align: center;
  margin: auto;
  width: 240px;
  position: fixed;
  bottom: 0;
  left: 0;
}
<div class="side-container">

  <div class="side-inner-container">

    <div class="header">header</div>
    <div class="nav">nav
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>last</li>
      </ul>
    </div>
    <div class="footer">footer</div>

  </div>

</div>

If you want to edit this, you must balance fixed elements properly with other elements. let me know if this helps.

Mad7Dragon
  • 1,237
  • 1
  • 10
  • 21
  • I updated the height should be 90% considering your footer height so no elements in the list will hide behind it. so don't forget to manage that if you edit footer height. – Mad7Dragon Oct 16 '22 at 12:27
  • See two things when we scroll it starts from different position and starts overlapping with the sidebar-header. –  Oct 17 '22 at 07:35
  • Second thing, when we scroll to bottom it doesn't show all the elements of the ul. –  Oct 17 '22 at 07:37
  • It will surely help ,thanks btw, i tried in my layout it worked fine, just 1 thing try to give a margin of 50 px from top. i tried in your code but it didn't worked. –  Oct 18 '22 at 13:04
  • because header, navbar and footer are all fixed, so it's better to use them without margin top or bottom. you want the header to be a little down, right? if I have time later, I will try to do this layout for you with only fixed navbar. – Mad7Dragon Oct 18 '22 at 13:39
  • Thanks for your help, but it didn't solve my problem –  Oct 19 '22 at 11:21
0

You may use the flex layout on the main container too and then set the nav on flex:1 + overflow:auto; . You will only need from here to set an height on the main container . header & footer can be any height.

Mind the box-sizing property too, it will help taking paddings and borders into account.

also, if you use a class to toggle show/hide via display, do use display:flex not block, else you loose all benefits and behavior of flex.

Possible example:

//for sidebar
const sidebar = document.querySelector('#mySidebar')

const toggle = document.querySelector('#sidebar-toggle')

toggle.addEventListener('click', toggleSidebar)

function toggleSidebar(e) {
  toggle.classList.toggle('open')
  sidebar.classList.toggle('open');// make sure the display set is the one you need : block,flex,grid,whatever you used to build the layout
}
//for sidebar
*{
  margin:0;
  padding:0;
}
header{
  height: 50px;
  width:100%;
  background: coral;
  position:fixed;
}
header img{
  height: 40px;
  width:40px;
  margin: 5px;
}
*{
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  text-decoration:none;
}
.open.sidebar {
  display: flex;
}
#sidebar-toggle{
  display: inline-block;
  cursor: grab;
  background: rgba(0, 136,169, 1);
  border-radius: 50%;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  margin-top: 5px;
  float:right;
}
#sidebar-toggle div{
  width: 20px;
  height: 2px;
  background-color: #fff;
  margin: 6px 0;
  transition: all 0.3s ease 0s;
  cursor: grab;
}
#sidebar-toggle.open .bar4 {
  transform: translate(0, 8px) rotate(-45deg);
}
#sidebar-toggle.open .bar5 {
  opacity: 0;
}
#sidebar-toggle.open .bar6 {
  transform: translate(0px, -8px) rotate(45deg);
}

#mySidebar{
  transition:all 0.2s linear;
  transform:translateX(-250px);
}
#mySidebar{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 50px); 
  box-sizing:border-box;
  top:50px;
}
/* then a few properties removed and box-sizing added */
.sidebar{
  position: fixed;
  top:0;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  z-index: 0;
  transition: all 0.5s ease;
}
.open.sidebar {

}
.sidebar-nav {
  flex:1 ;
  overflow:auto;
}
#mySidebar.open{
  transform:translateX(0);
}
.sidebar-header{
  padding: 0px;
  width: 100%;
  background: rgba(0, 136,169, 1);
  height: 3rem;
}
.sidebar-header .profile{
  display:  flex;
  color: #fff;
}
.profile .profile-image img{
  flex-wrap: wrap;
  pointer-events: none;
  border-radius: 50%;
  width: 40px;
  float: none;
  display: block;
  object-fit: fill;
  height: 40px;
  margin-left:  20px;
}
.profile .profile-name{
  display: inline-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px 0 5px;
  font-size: 14px;
  font-weight: 600 !important;
}
.profile .profile-name i{
  margin: -2px 5px 0 2px;
  font-size: 16px;
}
.profile-stats{
  margin: 10px 0;
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  gap:  0.25rem;
  align-items: center;
  cursor: pointer;
}
.profile-stats .stats{
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}
#followerCount, #mediaCount,#followingCount{
  font-size: 10px;
}
.sidebar-nav{
margin:  0;
overflow: auto;
}
.sidebar-nav ul {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style:none;
    padding: 0 15px;
    line-height: 30px;
    box-sizing:border-box;
}
.sidebar-nav ul li{
    width:100%;
    box-sizing:border-box;
    color:#007bff;
    padding:  5px 10px;
    margin: 1px 0;
}
.sidebar-nav ul li a{
    text-decoration:none;
}
.sidebar-nav ul .active,
.sidebar-nav ul .active a .icon{
    background:#007bff;
    color: #ffffff;
    border-radius: 10px;
}

.sidebar-nav ul li:hover,
.sidebar-nav ul li:hover a .icon, 
.sidebar-nav ul li:hover a{
    background:#007bff;
    color: #ffffff;
    border-radius: 10px;
}
.sidebar-nav ul li a .icon{
  color:#007bff;
  width:30px;
  display: inline-block;
}
.sidebar-nav .sidebar-nav-header{
  text-transform: uppercase;
  font-size: 11px;
  margin: 0.75rem 1.5rem 0;
  color:#0c7db1;
}
.sidebar-footer{
  background: #FF7F50;
  text-align: center;
}
.sidebar-footer span a{
  display: block;
  padding:.5em 0;
  color: #fff;
  background: #FF7F50;
  font-weight:  600 !important;
  text-decoration:none;
}
.sidebar-footer span i{
  width: 30px;
  font-size: 16px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<header>
  <img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg" class="logo" alt="Logo">
  <div id="sidebar-toggle">
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
  </div>
</header>
<div class="sidebar" id="mySidebar">
  <div class="sidebar-header">
    <div class="profile">
      <div class="profile-image">
        <img src="https://media-exp1.licdn.com/dms/image/C560BAQHMnA03XDdf3w/company-logo_200_200/0/1519855918965?e=2147483647&v=beta&t=J3kUMZwIphc90TFKH5oOO9Sa9K59fimgJf-s_okU3zs">
      </div>
      <div class="profile-name">
        <i class="fas fa-chess-pawn"></i><span>Umann Goswami</span>
      </div>
    </div>
  </div>
  <!--sidebar-header-->
  <div class="sidebar-nav">
    <ul>
            <li class="active"><a href=""><span class="icon"><i class="fas fa-home"></i></span>Home</a></li>
             
             <li><a href=""><span class="icon"><i class="fas fa-chart-bar"></i></span>Feed</a></li>

             <li><a href=""><span class="icon"><i class="fas fa-pen-nib"></i></span>Posts</a>
             </li>
             
             <li><a href=""><span class="icon"><i class="fas fa-file-alt"></i></span>Categories</a></li>

             <li><a href=""><span class="icon"><i class="far fa-comments"></i></span>Comments</a></li>

             <li><a href=""><span class="icon"><i class="fas fa-cog"></i></span>Settings</a></li>
        </ul>
        <div class="sidebar-nav-header">
           Admin
        </div>
            <ul>
                <li><a href=""><span class="icon"><i class="fas fa-users"></i></span>Users</a></li>

            </ul>
        <div class="sidebar-nav-header">
            Profile
        </div>

        <ul>
            <li><a href=""><span class="icon"><i class="fas
             fa-user"></i></span>View</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-user-edit"></i></span>Edit</a></li>
        </ul>

        <div class="sidebar-nav-header">
            Analysis
        </div>
        
        <ul>
            <li><a href=""><span class="icon"><i class="fas
             fa-user"></i></span>View</a></li>
            <li><a href=""><span class="icon"><i class="fas fa-user-edit"></i></span>Edit</a></li>
        </ul>
  </div>
  <!--sidebar-nav-->
  <div class="sidebar-footer">
    <span><a href=""><i class="fas fa-power-off"></i>Logout</span></a>
  </div>
</div>
<!--sidebar-->

close if not duplicate : Fill remaining vertical space with CSS using display:flex

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • sir this #mySidebar styling with display flex makes the whole sidebar fixed at its place, it is a onclick open one i'm trying to create. #mySidebar{ display:flex; flex-direction:column; height:calc(100vh - 50px); box-sizing:border-box; top:50px; } –  Oct 17 '22 at 07:39
  • Hello, you did not share your onclick open method (only saw the translate rule commented) , but flex or whatever else display should not disturb it. Also, this is not the question if your asking how to do this too. ;) @techieafrohead – G-Cyrillus Oct 18 '22 at 16:54
  • @ G-Cyrillus i'll be updating with codepen link. –  Oct 19 '22 at 11:38
  • https://codepen.io/TA0011/pen/yLjWwGQ link to my work –  Oct 19 '22 at 12:16
  • @techieafrohead if i take the code i proposed (with translate) it works : https://codepen.io/gc-nomade/pen/abGrgrb?editors=1100 . It did not work for you because you did reset disply to block instead flex via the `.open` class :) – G-Cyrillus Oct 19 '22 at 14:05
  • 1
    I edited the snippet with the code from your codepen to demonstrate it works (using translate), but if you want to stick to display, use display:flex, not block via the `.open` class ;) @techieafrohead – G-Cyrillus Oct 19 '22 at 14:13
  • you solved my problem though. Thanks sir –  Oct 20 '22 at 13:30
  • i'll come with more questions.... please help me in the long run –  Oct 20 '22 at 13:30
  • @techieafrohead okay, where is your next question(s) ? ;) . If my answer solved your trouble, you could tick it , even upvote it too :) – G-Cyrillus Oct 20 '22 at 18:15
  • G-Cyrillus see my recent update –  Oct 25 '22 at 06:15