MagicLine jQuery - length of underline

Question

I tried to use MagicLine jQuery Navigation on my website, but I've run into a small problem. I want the underline to be precisely as long as the word that it's currently highlighting. Instead it's a few pixels longer and I simply can't deal with that. I tried to fix it with CSS but I failed. I believe the solution of this problem can be found in jQuery code, but I'm not familiar with it so I'm asking you for help. How to shorten the length of the underline in jQuery?

Here you can find MagicLine jQuery Navigation and here a graphic description of my problem.

Answer 1

I make some tweaks to make it fit for your requirement

$("#example-one li").find("a").hover(function() {
    $el = $(this);
    var padding = ($el.outerWidth() - $el.width()) / 2;
    console.log($el.outerWidth(),$el.width(), padding)
    leftPos = $el.position().left + padding;
    newWidth = $el.width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

Also need to change the current_page_item also

var $currentItem =  $(".current_page_item a");
var padding = ($currentItem.outerWidth() - $currentItem.width()) / 2;

$magicLine
    .width($currentItem.width())
    .css("left", $currentItem.position().left + padding)
    .data("origLeft", $magicLine.position().left )
    .data("origWidth", $magicLine.width());

Demo: Fiddle

Answer 2

I found the solution .navigation ul li.active { margin-right: -10px; }

You need to give this CSS to it.