[Resolved] Centering navigation hover effect

Home Forums Support Centering navigation hover effect

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #331740
    Heidi

    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

    GeneratePress 1.3.48
    #331763
    Leo
    Staff
    Customer Support

    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.

    #331982
    Heidi

    That worked great! Thanks so much!

    Heidi

    #332002
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.