You need to be adding those images as background images in the CSS code for the menu items. That’s not what you have right now.
I’m repasted the css code showing images as bkgd images:
css code:
li.page-item-2 a,
li.page-item-4 a {
text-indent: -9999px;
width: 124px;
height: 32px;
background: url(http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/about-in.gif) top center no-repeat !important;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you want to expand those background images, you need to do-so within some sort of image-manipulating software irrelevant to WordPress. Do you want to do this?
Yes, that one is a background image — you can adjust the alignment of that image using the margins in this CSS:
.main-navigation li {
margin: 0 2.85714rem 0 0;
}
But the home image is not a background image – it’s in the HTML code below the nav menu — here:
</nav><!-- #site-navigation -->
<img src="http://tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/home.gif" alt="home" />
Presumably you added that to the header.php file?
I added the “home” image code you posted and now there are 2 “home” images displaying in the LOWER navigation menu. The “home” image belongs in the top menu, WordPress’ main aka primary menu.
I’m repasting the header.php code here (your code included):
</nav><!-- #site-navigation -->
<img src="http://tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/home.gif" alt="home" />
<?php $page_id=get_the_ID(); /* Add navigation imgages */
if(is_home()) { $image='home.gif'; }
if(is_page()) { $image='head-image-'.$page_id.'.gif'; };
if(!file_exists(STYLESHEETPATH.'/images/'.$image)) { $image='home.gif'; } //specific image not found, use default header image set as the same as the posts page header image
echo '<img src="'.get_stylesheet_directory_uri().'/images/'.$image.'" alt="home" />'; ?>
What I was trying to say (and the code I posted above) is showing what is WRONG — you need to remove all of that. Sorry if it was not clear. Any menu images need to be in the CSS code as background images — you’ll need a separate CSS section for each menu item — with the image for that item and using the specific page id or class in the selector.
In fact the CSS code you are using above is already problematic because it is assigning the same image to two menu items (page-item-2 and page-item-4) — but only one shows up right now because you don’t have a page-item-2.
OK, I removed all of the above code from the header so now only the “About” image displays. Yes, I have to add the page for page-item-4.
Right now, I want to know that images are displaying and aligning correctly b4 I migrate the site.
I added the following code for the “home page and it appears to work:
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
text-indent: -9999px;
width: 124px;
height: 32px;
background: url(http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/home.gif) top center no-repeat !important;
}
Why is there a space between the “home” and “about” images? I do have a divider/spacer I’d like to put between the nav images. How do I do that? I added the following but it’s not working:
li.page-item-2 a {
text-indent: -9999px;
width: 124px;
height: 32px;
background: url(http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/about-in.gif; url(http://www.themiraclemerchant.com/skin/frontend/default/miracle/images/divider.gif) top center no-repeat !important;
}
Oops sorry, my browser cache messed me up — will look again.
The code shows this:
li.page-item-2 a, li.page-item-4 a {
background: url("http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/about-in.gif") no-repeat scroll center top transparent !important;
height: 32px;
text-indent: -9999px;
width: 124px;
}
so remove the , li.page-item-4 a from it.
To adjust the spacing – change the margin in this CSS:
.main-navigation li {
margin: 0 2.85714rem 0 0;
}
The spacing between the nav images worked when I added “px” to the numbers — The “rem” measurement doesn’t work. Ex. margin: 0px;
Now how to I add the divider/spacer from this site between each nav image? What css code can I insert between each nav image to display the divider?
I’m reading http://digitalraindrops.net/2010/09/menu-images/ to get some ideas, specifically
#access li {
background: url(http://www.tmmcom.dreamhosters.com/wp-content/themes/twenty-plus-pro/images/divider.gif) no-repeat right center;
}
