[Solved]-Hide navigator's top outline outside of selection-Highcharts

all the blue lines are created by one svg path element. the only way to change a navigator outline is to wrap the function responsible for drawing it and change its path.

for example:

(function(h) {
  h.wrap(h.navigator.prototype, 'drawoutline', function(procced, zoomedmin, zoomedmax, inverted, verb) {
    var navigator = this,
      maskinside = navigator.navigatoroptions.maskinside,
      outlinewidth = navigator.outline.strokewidth(),
      halfoutline = outlinewidth / 2,
      outlinecorrection = (outlinewidth % 2) / 2, // #5800
      outlineheight = navigator.outlineheight,
      scrollbarheight = navigator.scrollbarheight,
      navigatorsize = navigator.size,
      left = navigator.left - scrollbarheight,
      navigatortop = navigator.top,
      verticalmin,
      path;

    if (inverted) {
      left -= halfoutline;
      verticalmin = navigatortop + zoomedmax + outlinecorrection;
      zoomedmax = navigatortop + zoomedmin + outlinecorrection;

      path = [
        'm',
        left + outlineheight,
        navigatortop - scrollbarheight - outlinecorrection, // top edge
        'l',
        left + outlineheight,
        verticalmin, // top right of zoomed range
        'l',
        left,
        verticalmin, // top left of z.r.
        'l',
        left,
        zoomedmax, // bottom left of z.r.
        'l',
        left + outlineheight,
        zoomedmax, // bottom right of z.r.
        'l',
        left + outlineheight,
        navigatortop + navigatorsize + scrollbarheight // bottom edge
      ].concat(maskinside ? [
        'm',
        left + outlineheight,
        verticalmin - halfoutline, // upper left of zoomed range
        'l',
        left + outlineheight,
        zoomedmax + halfoutline // upper right of z.r.
      ] : []);
    } else {
      zoomedmin += left + scrollbarheight - outlinecorrection;
      zoomedmax += left + scrollbarheight - outlinecorrection;
      navigatortop += halfoutline;

      path = [
        'm',
        zoomedmin,
        navigatortop, // upper left of zoomed range
        'l',
        zoomedmin,
        navigatortop + outlineheight, // lower left of z.r.
        'l',
        zoomedmax,
        navigatortop + outlineheight, // lower right of z.r.
        'l',
        zoomedmax,
        navigatortop, // upper right of z.r.
      ].concat(maskinside ? [
        'm',
        zoomedmin - halfoutline,
        navigatortop, // upper left of zoomed range
        'l',
        zoomedmax + halfoutline,
        navigatortop // upper right of z.r.
      ] : []);
    }
    navigator.outline[verb]({
      d: path
    });

  });
}(highcharts));

live example: https://jsfiddle.net/blacklabel/lrgok19a/

useful thread: https://www.highcharts.com/forum/viewtopic.php?t=41155