title: Bootstrap make menu item active
body: <p>I have this url www.url.com/photos that will make the "photos" item on my menu active. However, if I go to the edit page www.url.com/photos/edit, the active item disappears. I have discovered that this is where the active item is being controlled but how do I make it so that it will remain active even in my edit pages? </p>
  
  <p>This is the code I found</p>
  
  <pre><code>var url = window.location;
  //    console.log(url);
      // var element = $('ul.nav a').filter(function() {
      //     return this.href == url;
      // }).addClass('active').parent().parent().addClass('in').parent();
      var element = $('ul.nav a').filter(function() {
          return this.href == url;
      }).addClass('active').parent();
  
      while (true) {
          if (element.is('li')) {
              element = element.parent().addClass('in').parent();
          } else {
              break;
          }
      }
  </code></pre>
  
  <p>EDIT : I found a solution in the end. Thank you for everyone who helped! </p>
  
  <p>Replace my code with this one</p>
  
  <pre><code>var element = $('ul.nav a').filter(function() {
          return this.href == url || url.href.indexOf(this.href) == 0;
      }).addClass('active').parent().parent().addClass('in').parent();
      if (element.is('li')) {
          element.addClass('active');
      }
  </code></pre>