Home › Forums › CSS › Moving image to button on hover › Reply To: Moving image to button on hover
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.