title: Changing menu title only happens after first time
body: <p>I have a bootstrap menu. If it is collapsed I want it to have the name of the page, if it is open I want it to name menu.</p>
  
  <p>For now I named it "Watch the Trailer" (so assume where on that page).
  When clicking the button, changing the title works but it only works after the first time. Why is that?</p>
  
  <p>And is my approach a good approach? Here is a <a href="https://jsfiddle.net/clankill3r/gguc1nub/3/" rel="nofollow">jsfiddle for convenience</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var menu_title = $(".so_menu_name").html();
      
  $(".navbar button").on("click", function () {
    var collapsed = $(".navbar button").hasClass("collapsed");
    if (!collapsed) {
      $(".so_menu_name").html(menu_title);
    }
    else {
      $(".so_menu_name").html("Menu");
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav.navbar-nav .nav-item {
        float: none;
  }
  
  .nav.navbar-nav .nav-item+.nav-item {
        margin-left: 0;
  }
  .nav.navbar-nav .nav-link {
        padding: .25rem 0;
  }
  .nav.os_menu {
        border-top: 2px solid rgba(255, 255, 255, .5);
        border-bottom: 2px solid rgba(255, 255, 255, .5);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;nav class="navbar navbar-dark bg-inverse"&gt;
      &lt;span class="so_menu_name"&gt;Watch the Trailer&lt;/span&gt;
      &lt;button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar"&gt;+&lt;/button&gt;
  
      &lt;div class="collapse navbar-toggleable-xs" id="collapsingNavbar"&gt;
  
        &lt;ul class="nav navbar-nav os_menu"&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link" href="#"&gt;Watch the Trailer&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Screening &amp; Events&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Synopsis&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;The Protagonist&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/div&gt;
    &lt;/nav&gt;
  
  &lt;/div&gt;
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>