jbrashear72
asked on
CSS menu using images for Main nav
I am converting my Nav menu I have to one that Wordpress is controling. The original nav linked directly to images in the LI tags. Here is were the test is:
http://www.eyelasikaustin.com/testing-menu/
Here you can see what it needs to look like:
http://www.eyelasikaustin.com
How do I style the id's to not show the text and use an image instead?
http://www.eyelasikaustin.com/testing-menu/
Here you can see what it needs to look like:
http://www.eyelasikaustin.com
How do I style the id's to not show the text and use an image instead?
<!-- Code that Is generated from WordPress -->
<div class="navigation">
<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-432" class="menu-item menu-item-type-post_type"><a href="http://www.eyelasikaustin.com/our-facility/">our FACILITY</a></li>
<li id="menu-item-433" class="menu-item menu-item-type-post_type"><a href="http://www.eyelasikaustin.com/our-surgeons/">Our Surgeons</a></li>
<li id="menu-item-434" class="menu-item menu-item-type-post_type"><a href="http://www.eyelasikaustin.com/procedures/">Procedures</a></li>
<li id="menu-item-431" class="menu-item menu-item-type-post_type"><a href="http://www.eyelasikaustin.com/maps-and-directions/">Maps & Directions</a></li>
<li id="menu-item-430" class="menu-item menu-item-type-post_type"><a href="http://www.eyelasikaustin.com/contact/">Contact</a></li>
</ul>
</div>
</div>
<!-- Original Nav -->
<div class="navigation navigation_home">
<ul>
<li><a href="http://www.eyelasikaustin.com/our-facility/"><img src="http://www.eyelasikaustin.com/wp-content/themes/nuartisan/images/navi_ourfacility.jpg" alt=""></a></li>
<li class="divider"> </li>
<li><a href="http://www.eyelasikaustin.com/our-surgeons/"><img src="http://www.eyelasikaustin.com/wp-content/themes/nuartisan/images/navi_oursurgeons.jpg" alt=""></a></li>
<li class="divider"> </li>
<li><a href="http://www.eyelasikaustin.com/procedures/"><img src="http://www.eyelasikaustin.com/wp-content/themes/nuartisan/images/navi_procedures.jpg" alt=""></a></li>
<li class="divider"> </li>
<li><a href="http://www.eyelasikaustin.com/maps-and-directions/"><img src="http://www.eyelasikaustin.com/wp-content/themes/nuartisan/images/navi_mapsdirections.jpg" alt=""></a></li>
<li class="divider"> </li>
<li><a href="http://www.eyelasikaustin.com/contact/"><img src="http://www.eyelasikaustin.com/wp-content/themes/nuartisan/images/navi_contactus.jpg" alt=""></a></li>
</ul>
</div>
You can use sprites, or you can use this method:
First you will need the Firefox Plug-in called WebDeveloper: https://addons.mozilla.org/en-us/firefox/addon/web-developer/
Once you install it, you can click Information>View Object Information, then hover over the nav link that you want to add an image to. You will see an info box pop up. Inside the info box it will show the menu id. You will need the menu-item ID to add the image. Next is to change the CSS, like this for example:
That is one way of doing it, but you will have to change the positioning for you specific menu.
First you will need the Firefox Plug-in called WebDeveloper: https://addons.mozilla.org/en-us/firefox/addon/web-developer/
Once you install it, you can click Information>View Object Information, then hover over the nav link that you want to add an image to. You will see an info box pop up. Inside the info box it will show the menu id. You will need the menu-item ID to add the image. Next is to change the CSS, like this for example:
#menu-item-166 {
text-indent: -9999px;
width: 40px;
}
#menu-item-166 a {
background: #ccc url(images/yourimage.jpg) top center no-repeat !important;
}
#menu-item-166 a:hover {
background: #0b2300 url(images/yourimage-active.jpg) top center no-repeat !important;
}That is one way of doing it, but you will have to change the positioning for you specific menu.
ASKER
That is getting us close. I added that to the first nav element on the testing page. The image seems to be very thin and dropped down a bit. I am adding the images to the rest.
http://www.eyelasikaustin.com/testing-menu/
http://www.eyelasikaustin.com/testing-menu/
It doesn't display correctly right now, I will check back when it is working a little better.
Also, you appear to be using Google Fonts. It isn't placed correctly and you are getting excess data in the css. More than likely your code isn't correct in the header.php. It should look like this:
Of course you will want to change the fonts to what you are using. Then to use it in the css it would be like this for example:
Notice the font name requires to be wrapped int single quotes.
Also, you appear to be using Google Fonts. It isn't placed correctly and you are getting excess data in the css. More than likely your code isn't correct in the header.php. It should look like this:
<link href='http://fonts.googleapis.com/css?family=Lobster:b,bi|Cuprum:i,b,bi' rel='stylesheet' type='text/css'>Of course you will want to change the fonts to what you are using. Then to use it in the css it would be like this for example:
body {
font-family: 'Lobster';
font-size: 1.4em;
line-height: 1.6em;
color: black;
}Notice the font name requires to be wrapped int single quotes.
ASKER
oh I messed it up. I am working on it.
Look at it now.
Look at it now.
I must have missed it, everything is floating left.
ASKER
I have all the images replacing the top nav but they are over lapping and I am confused as to what to do to make this work. It seem that some of the styles I have in the page are getting ignored. haha stressing me out.
Make sure the padding, or margin you have set for the dropdown menu-items is as large as the images so it will allow for them to be visible.
ASKER
I am not sure witch Ctyle is controlling that at this point.
Have you removed the drop down menu items?
When I go there it doesn't seem to have child pages added to the menu. If you still have them enabled, reply back and I will see if I can help.
When I go there it doesn't seem to have child pages added to the menu. If you still have them enabled, reply back and I will see if I can help.
ASKER
I seem to have the spacing for the top nav but the sub menu is really messed up It is not dropping down.
ASKER
I added them back. they are only under the proceedures.
ASKER
Got any idea why the Sub menu is not working?
I will take a look. I had to get caught up on some work. I will reply back with my findings.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I used a menu that had been created by the suckerfish menu and converted it to not require .js. I think I left a few extra seletors that aren't needed.
ASKER
Man I apreciate it. DO just replace all the CSS that is inside the file itself I am sorta a novice.. =) but learning!
Yes, you can just replace everything inside of the meun2.css. You might want to back it up before replacing it, just in case you don't like the new one.
ASKER
As far as the main menu items that are using the images. Do I add those to the bottom of this ctyle?
ASKER
#menu-item-432 {
text-indent: -9999px;
width: 1px;
margin-right: 19px;
}
#menu-item-432 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_ourfacility
}
/* Surgeons */
#menu-item-433 {
text-indent: -9999px;
width: 1px;
margin-left: 75px;
}
#menu-item-433 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_oursurgeons
}
/* Procedures */
#menu-item-434 {
text-indent: -9999px;
width: 20px;
margin-left: 100px;
}
#menu-item-434 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_procedures.
}
/* Maps And Directions */
#menu-item-431 {
text-indent: -9999px;
width: 20px;
margin-left: 100px;
}
#menu-item-431 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_mapsdirecti
}
/* Contact Us */
#menu-item-430 {
text-indent: -9999px;
width: 20px;
margin-left: 100px;
}
#menu-item-430 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_contactus.j
}
text-indent: -9999px;
width: 1px;
margin-right: 19px;
}
#menu-item-432 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_ourfacility
}
/* Surgeons */
#menu-item-433 {
text-indent: -9999px;
width: 1px;
margin-left: 75px;
}
#menu-item-433 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_oursurgeons
}
/* Procedures */
#menu-item-434 {
text-indent: -9999px;
width: 20px;
margin-left: 100px;
}
#menu-item-434 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_procedures.
}
/* Maps And Directions */
#menu-item-431 {
text-indent: -9999px;
width: 20px;
margin-left: 100px;
}
#menu-item-431 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_mapsdirecti
}
/* Contact Us */
#menu-item-430 {
text-indent: -9999px;
width: 20px;
margin-left: 100px;
}
#menu-item-430 a {
background: url(<?php bloginfo('template_url'); ?>/images/navi_contactus.j
}
ASKER
I am really close.. Current page item is getting tagged as a class and I don't see were it is getting set.. the Padding changes for this item.
Example:
http://www.eyelasikaustin.com/maps-and-directions/
on maps & directions it is raised.
Example:
http://www.eyelasikaustin.com/maps-and-directions/
on maps & directions it is raised.
Here is an example of how to get it to work. I used a picture from my site just to show you how to get it working. Let me know if you have any questions.
PLACE THIS IN YOUR CSS FILE:
PLACE THIS IN YOUR CSS FILE:
#menu-item-434 {
width: 119px;
padding: 10px;
background: url("http://wordpressexpression.com/hw/wp-content/uploads/2011/03/wifi_modem.png") top;
background-repeat: no-repeat;
text-indent: -9999px;
margin:0 5px 5px 0;
}
ASKER