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 float right two span tags on different lines?

    How to unfold or close content in html/JS - always assigned to different id

    CSS: how to center a list with image

    How to indent text exactly one character width

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    How to get logo to front layer

    How to use position in CSS?

    How to position nav element center under parent div?

    How can I adjust my thumbnail which exceeds its designated area?

    Creating a web page plugin. How to include css and render elements?

    How can I get my drop-down to not open unless the li is hovered?

    How to display background-image on entire site

    How are new lines made with text as background?

    How to add a custom CSS file in ExtJs 5?

    How to resize the clockpicker?

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?

    How to display first tab by default in css?

    how to add a different css to last mysql query result using php

    How to add incremental values to a css attribute with Jquery

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to generate a source map for minified CSS generated by dotless

    How can I convert to a CSS Drop down menu

    How to style form elements unobtrusively with JavaScript and CSS?

    how do I find out which skin Telerik's RADeditor is using by default?

    How can I style a list of name-value pairs to appear like an HTML table?

    CSS Sprites - How to align and make responsive?

    How to display source code with indent in a web page? HTML? CSS?

    How can I hide a style element in html

    How to make an image behave like in Primefaces?

    How can I position a web page in the middle of the screen?