Archived topic
Centering navigation hover effect
3 replies · Started by Heidi on June 10, 2017
Viewing posts 1–4 of 4
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
Hi there,
Can you give this a shot?
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: 50% 50%;
}Let me know.
That worked great! Thanks so much!
Heidi
No problem!
This archived topic is closed to new replies.
