Move side navbar to the right side in mobile screens

Question

I have a page which has one sidebar to open different pages. It is working as desired in wide screens moving the sidebar to the right side, but when I am trying this in mobile screens, the sidebar moves to the small screen. please, I need help to make it working on the right side in wide as well as mobile screens.

Following is the HTML and CSS of my page.

I have searched on the internet but I did not get any solution. From my side, I have tried to change the direction of the page in HTML but it is not working.

/* CSS Document */

body {
  background-color: #599cff;
  font-family: sans-serif, Arial, Helvetica;
  /*direction:rtl;*/
  /*font-family: times-new-roman;*/
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #47748b;
  /*margin: 5px 0;*/
}

#sidebar {
  font-family: sans-serif;
  overflow: hidden;
  z-index: 3;
  /*direction:rtl;*/
  /*height:100vh;*/
  /*overflow-y: scroll;*/
}

#sidebar h3 {
  font-size: .8em;
  color: #F0F8FF;
  text-transform: uppercase;
}

h6 {
  text-transform: uppercase;
  color: #a9a9a9;
  font-size: .7em;
  font-weight: bold;
}

#sidebar .list-group {
  max-width: 300px;
  background-color: #006666;
  /*#333;*/
  min-height: 100vh;
}

#sidebar i {
  margin-right: 6px;
}

#sidebar .list-group-item {
  border-radius: 4;
  background-color: #006666;
  /*#333;*/
  color: #F0F8FF;
  /*#333;#ccc;*/
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-size: .9em;
  /*border-color: #0d8686;#2c2c2c;*/
  #F0F8FF-space: nowrap;
}

#sidebar .list-group-item:hover {
  background-color: #F0F8FF;
  color: #333;
}


/* highlight active menu */

#sidebar .list-group-item:not(.collapsed) {
  background-color: #73abab;
  /*#222;*/
  /*border-color:#99cccc;#006666;*/
}


/* closed state */

#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}


/* open state */

#sidebar .list-group .list-group-item[aria-expanded="true"] {
  background-color: #006666;
  /*#222;*/
  color: #F0F8FF;
  /*border-color:#99cccc;*/
}

#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}


/* level 1*/

#sidebar .list-group .collapse .list-group-item,
#sidebar .list-group .collapsing .list-group-item {
  padding-left: 20px;
}


/* level 2*/

#sidebar .list-group .collapse>.collapse .list-group-item,
#sidebar .list-group .collapse>.collapsing .list-group-item {
  padding-left: 30px;
}


/* level 3*/

#sidebar .list-group .collapse>.collapse>.collapse .list-group-item {
  padding-left: 40px;
}

@media (max-width:768px) {
  #sidebar {
    min-width: 35px;
    max-width: 40px;
    overflow-y: auto;
    overflow-x: visible;
    transition: all 0.25s ease;
    transform: translateX(-45px);
    /*position: fixed;*/
  }
  #sidebar.show {
    transform: translateX(0);
  }
  #sidebar::-webkit-scrollbar {
    width: 0px;
  }
  #sidebar,
  #sidebar .list-group {
    min-width: 35px;
    overflow: visible;
  }
  /* overlay sub levels on small screens */
  #sidebar .list-group .collapse.show,
  #sidebar .list-group .collapsing {
    position: relative;
    z-index: 1;
    width: 190px;
    top: 0;
  }
  #sidebar .list-group>.list-group-item {
    text-align: center;
    padding: .75rem .5rem;
  }
  #sidebar h3 {
    font-size: .50em;
  }
  /* hide caret icons of top level when collapsed */
  #sidebar .list-group>.list-group-item[aria-expanded="true"]::after,
  #sidebar .list-group>.list-group-item[aria-expanded="false"]::after {
    display: none;
  }
}

.collapse.show {
  visibility: visible;
}

.collapsing {
  visibility: visible;
  height: 0;
  -webkit-transition-property: height, visibility;
  /*-moz-transition-property: height, visibility;*/
  transition-property: height, visibility;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.collapsing.width {
  -webkit-transition-property: width, visibility;
  /*-o-transition-property:width, visibility;*/
  transition-property: width, visibility;
  width: 0;
  height: 100%;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.language {
  float: right;
  text-align: center;
  line-height: 41px;
  height: 40px;
  position: relative;
  font-family: 'Conv_STC-Regular';
  cursor: pointer;
  margin-top: -1px;
}





  
  
  
  
  
  
  
  Bootstrap Side NavBar



  
    
      
      
        
        
        
          
          
            
            User
          
           
          
            
            Manifest/Operation
          
          
            Upload Truck Pre Arrival
            Generate DO
            Check In Gate
            Check Out Gate
            Generate Gatepass
          
          
            
            Billing
          
          
            Charge/Service Codes
            Vat Setup
            Generate Invoice
          

          
            
            Commercial
          
          
            Customer Details
            Contract Details
            Creating Tariffs
          
          
            
            Finance
          
          
            
            Admin Tools
          
          
            Modules
            Menu Items
            User Group
            Login Users
            Bilingual Interface Setup
            Bilingual Message Setup
            System Codes
          
          
            
            Settings
          
          
            Company Profile
          
        
         
      
      
        
          
            
              
            
          
          
            
              Saudi Development & Export Services Co. Ltd.
            
          
          
            
              
                 English
              
            
          
        

        

        
          
            DashBoard
          
        
        
          
            
              
                Item1
              
              
                Item2
              
            
          
          
            
              
                
                
                  
                    
                    
                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
                      gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                  
                
              

              
                
                
                  
                    
                    
                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                  
                
              
            
          
          
            
              
                User ID:
              
              
                
              
            
            
              
                User Password:
              
              
                
              
            
            
              
                User Profile:

Move side navbar to the right side in mobile screens

Answers (1)

Related Questions