I want to add a rollover/hover effect using a background image centered behind each menu item to create a glow effect.
The site’s temporary url is here
And the css I am trying to use is here:
div#primary-menu.main-nav {
text-align: center;
}
.main-navigation .menu > .menu-item > a:hover{
display:inline-block;
background: url(http://renedenfeld.com/staging/wp-content/uploads/2017/06/glow-behind-selected-navigation-2.png) no-repeat;
background-position: 0 0;
}
The css gets the background image in place on hover, but I can’t figure out how to center it!
Any advice greatly appreciated. And GeneratePress is the best theme EVER. Just saying.
Best,
Heidi