Bootstrap sidebar visible-xs

Question

I have the following HTML (ASP)


  
    
    
        
        
            
        
        
      
         Home
         Customers
         Reports
         Admin Panel

and this CSS:

/* Move down content because we have a fixed navbar that is 50px tall */
body {   
   padding-top: 50px;
}
#sidebar {
    padding:0px;
    padding-top:15px;
}
#sidebar, #sidebar a {
    color: #951013;
    padding-left:5px;
}
#sidebar .nav li>a:hover {
    color: #951013;
    background-color: #f5f5f5;
}
#sidebar .active > a,
#sidebar .active > a:hover,
#sidebar .active > a:focus {
  color: #fff;
  background-color: #951013; 
}
/* adjust the contents on smaller devices */
@media screen and (max-width: 968px) {
  .visible-xs{display:block!important;}
  .hidden-xs{display:none!important;}   
}

As you see i want to increase/override the default max-width to 968px but when i do that and visible-xs (tiny nav) gets visible its width does not change. It still needs to be 767 and then there remain only the glyph icons without the space to the right. How do i make the visible-xs the same as default but on 968px? Thank you

vanburen · Accepted Answer

There are two solutions in my answer:

1) A different code base that avoids using columns so the sidebar isn't reduced as the viewport changes; you can change the width of the sidebar with media queries then and have more control plus the sidebar is fixed so as you scroll through the main content of the page the sidebar is always there. The links have the same idea as far as hiding the text when you're at 968px.

2) Using your existing code, instead of having two separate menus you can use a class to hide the navigation text when you're at 968px.

Solution #1 (New Codebase)

body,
html {
  height: 100%;
}
body {
  padding-top: 60px;
}
.sidebar-fixed {
  margin-top: 60px;
  padding-left: 18px;
  padding-right: 18px;
  position: fixed;
  width: 150px;
  height: 100%;
  top: 0;
  left: 0;
  background: none;
}
ul.sidebar-list {
  list-style: none;
  display: inline;
  text-align: left;
}
ul.sidebar-list > li {
  padding-bottom: 15px;
}
ul.sidebar-list > li > a {
  color: #951013;
  text-decoration: none;
}
ul.sidebar-list > li > a:hover,
ul.sidebar-list > li > a:focus {
  color: #450C0E;
}
.main-content {
  margin-left: 150px;
}
@media (max-width: 968px) {
  .sidebar-fixed {
    width: 85px;
  }
  .main-content {
    margin-left: 85px;
    padding: 0;
  }
  ul.sidebar-list {
    text-align: center;
  }
  .sidebar-fixed li .nav-text {
    display: none;
  }
}






  
    
      
        
      

    
  


  
    
      
    
    
      
          Home 
        

      
      
          Customers 
        

      
      
          Reports  
        

      
      
          Admin Panel  
        

      
    
  
  
    
      
      Bootstrap Sidebar Navigation
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.

Solution #2 (Original Codebase)

body {
  padding-top: 60px;
}
#sidebar {
  padding: 0px;
  padding-top: 15px;
}
#sidebar,
#sidebar a {
  color: #951013;
  padding-left: 5px;
}
#sidebar .nav li>a:hover {
  color: #951013;
  background-color: #f5f5f5;
}
#sidebar .active > a,
#sidebar .active > a:hover,
#sidebar .active > a:focus {
  color: #fff;
  background-color: #951013;
}
@media (max-width: 968px) {
  #lg-menu .hidden-item {
    display: none;
  }
}






  
    
      
        
      

    
  


  
    
    
      
      
        
      
      
      
         Home

        
         Customers

        
         Reports

        
         Admin Panel

        
      
    
    
    
    
      
      Well Well
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.

Bootstrap sidebar visible-xs

Answers (1)

Related Questions