set nav bar height fixed and scroll to selection

src/css/jsoneditor.css

@@ -210,6 +210,11 @@ div.jsoneditor-outer {
   box-sizing: border-box;
 }
 
+div.jsoneditor-menu2 + div.jsoneditor-outer {
+  margin: -61px 0 0 0;
+  padding: 61px 0 0 0;
+}
+
 textarea.jsoneditor-text,
 .ace-jsoneditor {
   min-height: 150px;

src/css/menu.css

@@ -133,7 +133,7 @@ div.jsoneditor-menu a.jsoneditor-poweredBy {
 
 div.jsoneditor-menu2 {
   width: 100%;
-  min-height: 24px;
+  height: 26px;
   padding: 2px;
   margin: 0;
   -moz-box-sizing: border-box;

src/css/treepath.css

@@ -1,7 +1,12 @@
 
 div.jsoneditor-treepath {
   padding: 3px 0 2px 5px;
-  word-wrap: break-word;
+  overflow: hidden;
+}
+
+div.jsoneditor-treepath div.jsoneditor-contextmenu-root {
+  position: absolute;
+  left: 0;
 }
 
 div.jsoneditor-treepath span.jsoneditor-treepath-element{

src/js/TreePath.js

@@ -34,6 +34,7 @@ TreePath.prototype.setPath = function (pathObjs) {
   if (pathObjs && pathObjs.length) {
     pathObjs.forEach(function (pathObj, idx) {
       var pathEl = document.createElement('span');
+      var sepEl;
       pathEl.className = 'jsoneditor-treepath-element';
       pathEl.innerText = pathObj.name;
       pathEl.onclick = _onSegmentClick.bind(me, pathObj);
@@ -41,7 +42,7 @@ TreePath.prototype.setPath = function (pathObjs) {
       me.path.appendChild(pathEl);
 
       if (pathObj.children.length) {
-        var sepEl = document.createElement('span');
+        sepEl = document.createElement('span');
         sepEl.className = 'jsoneditor-treepath-seperator';
         sepEl.innerHTML = '≫';
 
@@ -60,6 +61,13 @@ TreePath.prototype.setPath = function (pathObjs) {
 
         me.path.appendChild(sepEl, me.container);
       }
+
+      if(idx === pathObjs.length - 1) {
+        var leftRectPos = (sepEl || pathEl).getBoundingClientRect().left;
+        if(me.path.offsetWidth < leftRectPos) {
+          me.path.scrollLeft = leftRectPos;
+        }
+      }
     });
   }