Reply To: Moving image to button on hover

[Atelierbram]

Im afraid that my WP theme support does not cover customization of menus, so i have met a wall when it comes to the .current-menu-item I tried adding it directly over the them menu code with no luck

Don’t know any better than WordPress giving the current menu item a class, so why your theme doesn’t allow for this is a mystery to me.
When wanting to build upon a WordPress theme which allows for more of a blank canvas, I can recommend Underscores theme. IMO it’s better to set the current-menu-item in PHP, and when building a custom menu, one can do things like:

    <li class="<?php if (is_page( "about" )) echo 'current-menu-item'; ?> menu-item">
      <a href="<?php echo $url; ?>/about/" class="menu-link"> about </a>
    </li>   

But there’s more ways to skin a cat, javascript to the rescue:

$(function() {

  var $el, leftPos, newWidth;
  $mainNav2 = $("#fancy-nav");

 $(".page-id-163 #fancy-nav li:nth-child(1)").addClass("current_page_item_two").siblings("li").removeClass("current_page_item_two");
 $(".page-id-10 #fancy-nav li:nth-child(2)").addClass("current_page_item_two").siblings("li").removeClass("current_page_item_two");
 $(".page-id-344 #fancy-nav li:nth-child(4)").addClass("current_page_item_two").siblings("li").removeClass("current_page_item_two");
 $(".page-id-12 #fancy-nav li:nth-child(5)").addClass("current_page_item_two").siblings("li").removeClass("current_page_item_two"); 

  $mainNav2.append("<li id='magic-line-two'></li>"); 

// rest of code 

Taking advantage of the WordPress body class, which adds the current page-id as a class on the body tag, we can now target the current list item with this, together with the nth-child selector that is, which matches the current item. When pasting this piece of jQuery javascript inside the function, then the current_page_item_two class is added to the current menu item, and removed from any other “sibling”-list-item. Which should make the hovering of the menu-links work as aspected.