Reply To: Moving image to button on hover

[Atelierbram]

The #fancy-nav is float right, with width to 50%, why is it not in the middle?

That’s what floats supposed to do, if and when the horizontal screen-space allows for it. If you want the nav centered you could possibly center the wrapper div, something like:

.nav-wrap  {
  /* width: 830px; */
  width: 26em;
  margin: 0 auto;
}

the image is not centred over the button,

Missing the background-position property and values:

#fancy-nav #magic-line-two {
  /* stuff */
  background-position: top center;
}

Also the image doesent stick over a new menu after it is clicked

The demo is just that, it is not a working website. On a live website, the webpage would refresh after clicking a menu-link, which would bring it to that different-page with the “current-link” being the one that was clicked (it will have that current_page_item class set on the list-item, and thus will have that image over that current menu-item).

Is there a way to add this effect to the built in menu in my wordpress theme

I think it’s very well possible. Change the javascript target from $mainNav2 = $("#fancy-nav"); to $mainNav2 = $("#site-navigation .nav-menu");

Alternatively one can digg into those theme templates and tweak them, maybe even bypass them and built a custom menu, and disable the “dashboard customizer” menu.

Have to make it responsive too, so maybe you can use some of the styling provided by the chosen theme and/or isolate those styles within media-queries (in the CSS). Anyway, better take your time for this; navigation menus are one of the more intricate, trickier parts of webdesign.