How to expand toggle sidebar more


Tags: javascript,jquery,html,css,twitter-bootstrap

Problem :

I'm using the following HTML + CSS for a sidebar on a asp.net web page. I got this from a template. Currently when I toggle the sidebar, it comes out messed up. The text and icon are not in the same line. I think it is running out of space. How can i change it so that when it is toggled, it opens up more? Thank you. I'm really new to CSS and bootstrap. Thank you.

   <div id="wrapper">      
      <!-- Sidebar -->
            <!-- Sidebar -->
      <div id="sidebar-wrapper">
        <ul class="sidebar-nav" id="sidebar">    
           <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li> 
          <li><a>Dashboard<span class="sub_icon glyphicon glyphicon-dashboard"></span></a></li>
          <li><a>Reports<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
            <li><a>Configuration<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
            <li><a>Settings<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
        </ul>
      </div>

      <!-- Page content -->
      <div id="page-content-wrapper">
        <div class="page-content inset">
          <div class="row">
                    <div>
                        <asp:ContentPlaceHolder ID="body" runat="server">
                        </asp:ContentPlaceHolder>
                    </div>

            </div>
          </div>
        </div>
      </div>

CSS:

.row{
    margin-left:0px;
    margin-right:0px;
}

#wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
    height: 100%
}

#sidebar-wrapper {
    margin-left: -150px;
    left: 70px;
    width: 150px;
    background: #222;
    position: fixed;
    height: 100%;
    z-index: 10000;
    transition: all .4s ease 0s;
}

.sidebar-nav {
    display: block;
    float: left;
    width: 150px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
}
#wrapper.active {
    padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
}

#page-content-wrapper {
  width: 100%;
}

#sidebar_menu li a, .sidebar-nav li a {
    color: #999;
    display: block;
    float: left;
    text-decoration: none;
    width: 150px;
    background: #252525;
    border-top: 1px solid #373737;
    border-bottom: 1px solid #1A1A1A;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}
.sidebar_name {
    padding-top: 25px;
    color: #fff;
    opacity: .7;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

.sidebar-bottom {
    position: absolute;
    bottom: 0;
}

#main_icon
{
   float:right;
   padding-right: 30px;
   padding-top:20px;
}
.sub_icon
{
   float:right;
   padding-right: 32px;
   padding-top:10px;
}
.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}

@media (max-width:767px) {
    #wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
}
#sidebar-wrapper {
    left: 70px;
}
#wrapper.active {
    padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
    width: 150px;
    transition: all .4s ease 0s;
}
}



    .glyphicon{
        font-size: 19px;
    }
}

JS:

$("#menu-toggle").click(function (e) {
                e.preventDefault();
                $("#wrapper").toggleClass("active");
            });


Solution :

You'll just need to make some updates to the CSS to make it wider. These are the selectors I made changes to. You can see the working version in the Fiddle below.

#sidebar-wrapper {
    margin-left: -242px;
    left: 70px;
    width: 250px;
    background: #222;
    position: fixed;
    height: 100%;
    z-index: 10000;
    transition: all .4s ease 0s;
}

#wrapper.active #sidebar-wrapper {
    left: 66px;
}

.sidebar-nav {
    display: block;
    float: left;
    width: 250px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width:767px) {
    #wrapper {
        padding-left: 70px;
        transition: all .4s ease 0s;
    }
    #sidebar-wrapper {
        left: 70px;
    }
    #wrapper.active {
        padding-left: 150px;
    }
    #wrapper.active #sidebar-wrapper {
        left: 242px;
        /*width: 150px; You can remove this */
        transition: all .4s ease 0s;
    }
}

Check out this Fiddle


    CSS Howto..

    How can I use jquery to hide a drop down menu when the user clicks outside of the menu area?

    How to position two blocks side by side with CSS

    How to target tablet devices with CSS queries

    How do you size an SWF object based on a Blueprint CSS span range?

    How to hide a whole a
    if table tag is is empty or null?

    How do I loop a css animation with multiple keyframe definitions?

    How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

    How to specify height using fancybox 2.1.4

    How I write a:hover::before in less file?

    How to stop jquery from overriding CSS color?

    How to create this style of nav bar using exclusively HTML5 and CSS?

    How to Apply CSS Style Code into My Custom TextView in Android

    How can I limit Bootstrap column to a specific column's height?

    How do I get a div to be positioned above an image?

    Google Chrome unresponsive on simple CSS page - how to fix?

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    How to have two sections using 50% of the total height?

    How can I archive this responsive design?

    How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

    How do I spread out this navbar along with making the links exclusive to the button itself?

    How to apply a CSS 3 blur filter to a background image

    How to use nth-child() but not for child in CSS?

    HTML4 strict: border=“0” is deprecated, how to replace it

    How to get the first letter of each word to be a different size and the rest to be the same size

    How to make a CSS horizontal navigation menu?

    How to properly use CSS in GWTP?

    How to visually position image before heading element

    How to correctly set background image in a HTML page using a JavaScript function

    How to add text underneath the centered image

    How to apply gradient to element with correctly display in IE9?