I have such a layout:

I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.

For now I have my header:

<div class="navbar-header">
  <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
  <a class="navbar-brand" href="#">...</a>
</div>

But I don't know how to make it collapse when one clicks.. Thanks

I have such a layout:

I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.

For now I have my header:

<div class="navbar-header">
  <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
  <a class="navbar-brand" href="#">...</a>
</div>

But I don't know how to make it collapse when one clicks.. Thanks

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Could you please post all of the code in your navbar. – Wowsk Commented Mar 21, 2016 at 10:41
• Be sure to call the exact name of the class of the button that triggers the toggle function in jquery or javascript. Also check your jquery links if it uses the exact links. Else it won't work. – claudios Commented Mar 21, 2016 at 10:54
• Have look to this plugin: jasny.net/bootstrap/components/#navmenu-offcanvas – Stephan Commented Mar 21, 2016 at 14:14

2 Answers 2

In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class "icon" and class "text", and on button click, toggle (hide and show) the element with the class "text". Then in a callback you could animate the resizing of the sidebar.

Edit2: Improved example

$('#togglebutton').click(function() {
    if ($(window).width() > 500) { //your chosen mobile res
      $('.text').toggle(300);
    } else {
      $('.menu').animate({
        width: 'toggle'
      }, 350);
    }
});

​.wrapper { width: 100% }
.menu {
      background: #222;
      float: left;
      display: block;
}

.icon { max-width: 1em }

.menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0.2em 0.5em;
}

.menu li { margin: 0 }

.menu a, .menu a:visited {
      color: white;
      text-decoration: none;
}

.text {
      display: inline;
      margin: 0;
}

.content { display: block; }

button { margin: 1em; }

@media only screen and (max-width: 500px) {
  .text {
      display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="menu">
    <ul>
      <li>
        <a href="#">
          <img class="icon" src="http://bit.do/iconUrl">
          <p class="text">Text 1</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img class="icon" src="http://bit.do/iconUrl">
          <p class="text">Text 2</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="content">
    <button id="togglebutton">&#9776;</button>
  </div>
</div>

Hope it was useful to have a general idea of my suggestion.

Update 2019

Bootstrap 4

This is also possible in Bootstrap 4, but still requires extra CSS to handle the sidebar state.

https://www.codeply.com/p/e5IcpodgE2

Bootstrap 3

You can create an "off canvas" sidebar, and then use Bootstrap's responsive utility classes to toggle display of the icons.

<div class="wrapper">
        <div class="row row-offcanvas row-offcanvas-left">
            <!-- sidebar -->
            <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
                <ul class="nav" id="menu">
                    <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li>
                </ul>
            </div>

            <!-- main right col -->
            <div class="column col-sm-9 col-xs-11" id="main">
                <a href="#" data-toggle="offcanvas" class="btn btn-default"><i class="fa fa-navicon"></i></a>
                <p>
                    content...
                </p>
            </div>
        </div>
</div>

https://www.codeply.com/p/uunNOeQAqo