By default left navigation width is 300px. Navigation width can be reduce or increased by moving divider horizontally.

Minimum limit is 20px so that some part of it is visible and max limit is 35% of available page width.

Default navigation width can be adjusted by adding following code in project specific css. For example default width needed is XYZpx

        
        .shell-left-navigation .divider-navigation {
          left: XYZpx;
        }
        .shell-left-navigation .navigation-pane-right {
          margin-left: XYZpx;
        }
        .navigation-pane-left {
          width: XYZpx;
        }
        
        

        <div class="container page shell-left-navigation">
          <div class="navigation-pane-left">
            <div class="navigation-content-wrapper">
              <div class="navigation-header">
                <h2>Header Title</h2>
              </div>
              <div class="navigation-content">
                Nav Content
              </div>
            </div>
            <div class="divider divider-navigation"></div>
            <div class="navigation-pane-right">
              <div class="pane">
                <a id="left-navigation"></a>
                <header class="content-header">
                  <h3 class="title">
                    Left Navigation
                  </h3>
                </header>
                <section>
                </section>
              </div>
            </div>
          </div>
        </div>
        
        

Title header is optional and it can be turned off by simply not including the following code.

    <div class="navigation-content-wrapper">

      <!-- navigation header is optional -->
      <div class="navigation-header">
        <h2>Header Title</h2>
      </div>

      <div class="navigation-content">
      <!-- all navigation content goes here -->

        <ul class="navigation-list">
          <li><a href=#">Send</a></li>
          <li class="active">
            <a href="#">Receive</a>
            <ul class="navigation-sub-list">
              <li><a href="#">Level 2 a</a></li>
              <li><a href="#">Level 2 b</a></li>
              <li>
                <a href="#">Level 2 c</a>
                <ul class="navigation-sub-list">
                  <li><a href="#">Level 3 a</a></li>
                  <li><a href="#">Level 3 b</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Approve</a></li>
          <li><a href="#">Trading Relationships</a></li>
          <li><a href="#">Batch Management</a></li>
          <li><a href="#">My Details</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Reporting</a></li>
          <li><a href="#">PO to Invoice</a></li>
          <li><a href="#">Product Codes</a></li>
        </ul>

      </div>

    </div>