Add rollover hover image to the menu nav bar

  • Author
  • #1363779

    theme: Adelle

    Hello there,

    I am trying to add a rollover hover image to each of my menu tabs in the navigation bar and I cannot seem to figure out how to do so. I would also like to know how to space the menu tabs out a bit more so the hover image will not run into the other tabs.


    The blog I need help with is


    One way would be to change the background on hover using CSS. The images will only be as wide as the actual menu item:

    #site-navigation > div > ul > li {
        background: url('');

    Thanks so much for your help.

    However, I would like to put a different picture on each menu item. I would also like to have it as a hover item when I hover over the menu item it shows up. I do not want it as a background.


    Where do you want it to appear? It can be done with the CSS nth-child like

    #site-navigation > div > ul > li:nth-child(1):hover:after {
        content: url('');
        position: absolute;
        width: 100%;
        height: auto;
        top: 100%;

    That should get you started. You’ll need to change the number inside nth-child() for each menu item. You’ll also probably need to play with the css positioning and widths as I haven’t tested this code.


    I would like to put a different picture on each menu item.

    To do that, you’ll need to learn how to read the HTML and find the unique identifier for each menu item. Then you can use a CSS example (posted below) to swap out individual menu items for images instead. The CSS image replacement technique works by using a background image.

    I will walk through one example as a start, it was made to work for main menu items in the Adelle theme.

    First, open your blog and use your browser tools to view the page source. Find the HTML for the main menu. Here is the “About” menu item HTML as an example:

    <li id="menu-item-316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-316"><a href="">About</a></li>

    The part that says id=”menu-item-316″ a unique identifier for that menu item. You can refer to IDs in CSS like this:


    So to replace the “About” menu item text with an image and also replace that image with a different image on hover, add this to your Appearance > Customize > CSS panel:

    #menu-item-316 a {
    	text-align: left;
    	text-indent: -9999px;
    	background: url( no-repeat;
    	width: 47px;
    	height: 47px;
    	padding: 0;
    #menu-item-316 a:hover {
    	background: url( no-repeat;

    I used images that are blue and orange color blocks, but you can replace the url() values in the example to change to a different image. When you change the url() value, you should update the width and height values to match the dimensions of your image.

    To replace a different menu item with an image, you should copy the entire example from above and replace the “menu-item-316” part with the ID value for the menu item you’d like to adjust. You should also update the url(), width, and height values accordingly.


    @designsimply of course, I did it the hard way!



    This was a very helpful thread. I am hoping to do the same thing with my navigation bar and menu item images. I’ve moved my image widgets, but I want the social media buttons to display on all posts, not just the main page, so that hasn’t worked well.

    I just applied the CSS above using my Facebook icon, but when I hover, it disappears.

    Here is my CSS:

    #menu-item-2972 {
    text-align: left;
    text-indent: 500px;
    background: url( no-repeat;
    width: 55px;
    height: 55px;
    padding: 0;
    #menu-item-2972 :hover {
    background: url( no-repeat;

    my site is

    Thank you!



    Just to clarify– I don’t want any change in the image on hover. Thanks!


    Hi, hlcalma. The issue stems from the following rule in your custom CSS:

    #access li:hover > a,#access ul ul :hover > a,#access a:focus {
        background: #fff;

    If you change it to the following, the issue will be resolved:

    #access li:hover > a,#access ul ul :hover > a,#access a:focus {
        background: none;

    You can also get rid of your second rule above, since you’re not looking for the image to change on hover.



    That worked perfectly. Thank you!



    Or wait, the image shows up correctly. But the link does not work. I checked the links in the custom menu items, and they are there and correct. Why might that be?



    Nevermind– they are working perfectly. Thanks again!


    Hi Guys

    Great work – I’ve got the hovering working perfectly in my menu now too, but now i would like to use the “hover” image as the image that displays by default when you are on that active item.

    I am using this code to make the active menu item bold, but now would like to use the hover image with this (so the user knows which image is active too)

    .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-page-ancestor > a, .main-navigation li.current-menu-item > a, .main-navigation li.current-menu-ancestor > a, .main-navigation li.current_page_item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-page-ancestor > a {
    color: #636363;
    font-weight: bold;

    The code to get my images to hover is:

    #menu-item-89 {
    background-image: url(“/images/menu-contact-light.png”);
    background-position: -4px -10px;
    background-repeat: no-repeat;
    line-height: 100px;
    margin-left: 0;
    margin-top: -25px;

    #menu-item-89:hover {
    background-image: url(“/images/menu-contact-dark.png”);
    margin-left: 0px;
    background-repeat: no-repeat;

    Any assistance would be greatly appreciated. I’ve tried adding current-menu-tem, menu-item:active, etc but with no luck.



    @stanleykobrin, could you provide a link to an example where that code is in place?


    The order of selectors like :hover and :active matter, so maybe check to see if the order is right. The right order is: link visited hover active.


    If you’re still having trouble, it would help a ton to see a link to the page that you’re working on. Please start a new help request if you need further help.

The topic ‘Add rollover hover image to the menu nav bar’ is closed to new replies.