• Hello all,

    I’ve been searching around for an answer to this but haven’t found anything thus far.

    basically i’m using wordpress’s current_page_item to add a background image to my horizontal menu. I’m just trying to figure out how to get the background image to appear below the text of the menu link instead of directly behind it. here’s the css of my menu.

    #menu {
    	float:right;
    	clear:right;
    	position: relative;
    	margin-top: 25px;
    	margin-right: 20px;
    	list-style-type: none;
    	display: inline;
    	z-index:1;
    }
    
    #menu li {
    	font-size: 18px;
    	list-style-type: none;
    	display: inline;
    	text-transform: lowercase;
    	margin-right: 1em;
    }
    
    #menu a:hover {
    	color: #33cc33;
    	text-decoration:none;
    	border-bottom: 4px solid #33cc33;
    }
    
    #menu li.current_page_item a{
    
    	margin-top: 14px;
    	border-bottom: 0px;
    	color: #33cc33;
    	text-decoration:none;
    	background-image: url('current.png');
    	background-repeat:no-repeat;
    }

    Thank you all for any help you can provide.

Viewing 2 replies - 1 through 2 (of 2 total)
  • #menu li.current_page_item a{
    	margin-top: 14px;
    	border-bottom: 0px;
    	color: #33cc33;
    	text-decoration:none;
    	background-image: url('current.png');
    	background-repeat:no-repeat;
            background-position: bottom;
            padding-bottom: 20px;
    }

    Try that but you will have to change the padding-bottom to a little higher than the height or your background image. Hard to diagnose without a live link to the site it may or may not work.

    Thread Starter radicalxedward

    (@radicalxedward)

    That completely did the trick. Thanks i can’t believe i couldn’t come up with that. I really appreciate your help!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘current_page_item and background image’ is closed to new replies.