title: How to hide side nav bar using HTML and CSS
body: <p>Hi I want my navbar to be automatically hidden when I move the mouse.There is an example i want to use <a href="https://codepen.io/JFarrow/pen/fFrpg" rel="nofollow noreferrer">https://codepen.io/JFarrow/pen/fFrpg</a>. I have read some document online, but I still can not figure out how.. Here is my  code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li .glyphicon {
      margin-right: 10px;
  }
  
  /* Highlighting rules for nav menu items */
  li.link-active a,
  li.link-active a:hover,
  li.link-active a:focus {
      background-color: #4189C7;
      color: white;
  }
  
  /* Keep the nav menu independent of scrolling and on top of other items */
  .main-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
  }
  
  @media (min-width: 768px) {
      /* On small screens, convert the nav menu to a vertical sidebar */
      .main-nav {
          height: 100%;
          width: calc(25% - 20px);
      }
      .navbar {
          border-radius: 0px;
          border-width: 0px;
          height: 100%;
      }
      .navbar-header {
          float: none;
      }
      .navbar-collapse {
          border-top: 1px solid #444;
          padding: 0px;
      }
      .navbar ul {
          float: none;
      }
      .navbar li {
          float: none;
          font-size: 15px;
          margin: 6px;
      }
      .navbar li a {
          padding: 10px 16px;
          border-radius: 4px;
      }
      .navbar a {
          /* If a menu item's text is too long, truncate it */
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
  
  
  &lt;div class='main-nav'&gt;
      &lt;div class='navbar navbar-inverse'&gt;
          &lt;div class='navbar-header'&gt;
              &lt;a class='navbar-brand' [routerLink]="['/home']"&gt;Navbar&lt;/a&gt;
              &lt;button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'&gt;
                  &lt;span  (click)="isCollapsed = !isCollapsed"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class='icon-bar'&gt;&lt;/span&gt;
                  &lt;span class='icon-bar'&gt;&lt;/span&gt;
                  &lt;span class='icon-bar'&gt;&lt;/span&gt;
                  &lt;span class='icon-bar'&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class='clearfix'&gt;&lt;/div&gt;
          &lt;div class='navbar-collapse collapse' &gt;
                  &lt;ul class='nav navbar-nav'&gt;
                      &lt;li [routerLinkActive]="['link-active']"&gt;
                          &lt;a [routerLink]="['/home']"&gt;
                              &lt;span class='glyphicon glyphicon-home'&gt;&lt;/span&gt; Home
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li [routerLinkActive]="['link-active']"&gt;
                          &lt;a [routerLink]="['/login']"&gt;
                              &lt;span class='glyphicon glyphicon-log-in'&gt;&lt;/span&gt; Log In
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li [routerLinkActive]="['link-active']"&gt;
                          &lt;a [routerLink]="['/margin']"&gt;
                              &lt;span class='glyphicon glyphicon-list'&gt;&lt;/span&gt; Report
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li [routerLinkActive]="['link-active']"&gt;
                          &lt;a [routerLink]="['/smart-table']"&gt;
                              &lt;span class='glyphicon glyphicon-list'&gt;&lt;/span&gt; Smart table
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I am not sure where should I add the code. There are codes online about adding a js function, or using some buid in bootstrap function, just not work for me....</p>
  
  <p>Appreciate your help. </p>