--- a/mouchak/static/js/mouchak.js
+++ b/mouchak/static/js/mouchak.js
@@ -54,7 +54,7 @@
       //console.log('rendering custom menu..');
       this.$el.append(this.model.get('html'));
     }
-    this.$links = $('.nav li');
+    this.$links = $('.nav > li');
     if(!this.$links) {
       throw new Error('Ill-formed menu! Please check you have <ul> element' +
           'inside your menu with class nav and <li> elements inside it');



@@ -81,22 +81,33 @@
       }));*/
     }, this);
   },
+  //FIXIT: sometimes clicking on nav link, this function does not handle the
+  //event directly. it is passed to showPage function of router, which calls
+  //this function. so this function is without an event object is some cases.
+  //Fix it always receive the click event.
   navClicked: function(event) {
     this.$links.removeClass('active');
-    if(!event) {
-      var fragment = location.hash.split('/')[1];
-      //var pos = _.indexOf(M.pages.models, M.pages.where({'name': fragment})[0]);
-      //console.log(fragment);
-      var pos = _.indexOf(this.model.get('menuOrder'), fragment);
-      //console.log(pos);
-      if(!fragment) {
-        pos = 0;
+    if(this.model.get('customMenu') === false) {
+      if(!event) {
+        var fragment = location.hash.split('/')[1];
+        //var pos = _.indexOf(M.pages.models, M.pages.where({'name': fragment})[0]);
+        var pos = _.indexOf(this.model.get('menuOrder'), fragment);
+        if(!fragment) {
+          pos = 0;
+        }
+        $(this.$links[pos]).addClass('active');
       }
-      $(this.$links[pos]).addClass('active');
+      else {
+        $(event.currentTarget).parent().addClass('active');
+      }
     }
-    else {
-      //console.log();
-      $(event.currentTarget).parent().addClass('active');
+    else if(this.model.get('customMenu') === true) {
+      // get the URL fragment
+      var fragment = location.hash.split('/')[1];
+      // find out where it is in the nav menu
+      var link = $('.nav').find('a[href="#/'+ fragment +'"]')[0];
+      // find its <li> parent all the way up in the main ul.nav
+      $(link).closest('ul.nav > li').addClass('active');
     }
   }
 });
--- a/mouchak/templates/editor.html
+++ b/mouchak/templates/editor.html
@@ -49,35 +49,35 @@
   <script type="text/template" id="menu-config-template">
     <div class="page">
       <div class="menu-config">
-        <h4> Menu Config </h4>
+        <h4> Configure Navigation Menu </h4>
 
         <div class="row">
-          <div class="form-group col-lg-12" id="menu-order-wrap">
+          <div class="form-group col-lg-6">
             <div class="input-group">
-              <span class="input-group-addon"> <strong> Menu Order</strong></span>
-              <input class="form-control" id="menu-order" type="text"
-              placeholder="list,page,slugs,for,menu,order" value="<%= menu_order %>">
+              <span class="input-group-addon">
+                <input id="custom-menu" type="checkbox">
+              </span>
+              <span class="input-group-addon"><strong>Custom Menu
+              </strong></span>
             </div>
             <span class="help-block">
-              <small>csv list of page slugs to come up in the navigation menu
-                in that order
+              <small>
+                activate to write your own custom menu
               </small>
             </span>
           </div>
         </div>
 
         <div class="row">
-          <div class="form-group col-lg-6">
+          <div class="form-group col-lg-12" id="menu-order-wrap">
             <div class="input-group">
-              <span class="input-group-addon">
-                <input id="custom-menu" type="checkbox">
-              </span>
-              <span class="input-group-addon"><strong>Custom Menu
-              </strong></span>
+              <span class="input-group-addon"> <strong> Menu Order</strong></span>
+              <input class="form-control" id="menu-order" type="text"
+              placeholder="list,page,slugs,for,menu,order" value="<%= menu_order %>">
             </div>
             <span class="help-block">
-              <small>
-                activate to write your own custom menu
+              <small>csv list of page slugs to come up in the navigation menu
+                in that order
               </small>
             </span>
           </div>
@@ -110,7 +110,7 @@
 
   <script type="text/template" id="header-config-template">
     <div class="page">
-      <h4> Configure your header here </h4>
+      <div><h4> Write HTML for your header here </h4></div>
       <div id="header-input" class="ace-mouchak">
         <%= M.escapeHtml(header) %>
       </div>
@@ -123,7 +123,7 @@
 
   <script type="text/template" id="footer-config-template">
     <div class="page">
-      <h4> Configure your footer here </h4>
+      <div><h4> Write HTML for your footer here </h4></div>
       <div id="footer-input" class="ace-mouchak">
         <%= M.escapeHtml(footer) %>
       </div>
@@ -140,9 +140,9 @@
       <div id="pagelist"></div>
       <button class="btn btn-primary" id="addPage">Add Page</button>
       <hr>
-      <p> <a href="#" id="menu-config"> Site Menu </a> </p>
-      <p> <a href="#" id="header-config"> Header Config </a> </p>
-      <p> <a href="#" id="footer-config"> Footer Config </a> </p>
+      <p> <a href="#" id="header-config"> Header </a> </p>
+      <p> <a href="#" id="footer-config"> Footer </a> </p>
+      <p> <a href="#" id="menu-config"> Navigation Menu </a> </p>
       <p><a href="{{ url_for('index') }}"> Go to site </a></p>
     </div>
   </script>