Solved

CSS menu using images for Main nav

Posted on 2011-03-02
22
433 Views
Last Modified: 2012-05-11
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?


<!-- 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 &#038; 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

Open in new window

0
Comment
Question by:jbrashear72
  • 12
  • 10
22 Comments
 
LVL 3

Author Comment

by:jbrashear72
ID: 35019965
I am thinking maybe using an image sprite. ??
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35020290
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:

#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;
}

Open in new window


That is one way of doing it, but you will have to change the positioning for you specific menu.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35020458
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/
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35020784
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:

<link href='http://fonts.googleapis.com/css?family=Lobster:b,bi|Cuprum:i,b,bi' rel='stylesheet' type='text/css'>

Open in new window


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;
}

Open in new window


Notice the font name requires to be wrapped int single quotes.

0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35021235
oh I messed it up.  I am working on it.
Look at it now.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35021419
I must have missed it, everything is floating left.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35021434
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35021461
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.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35021507
I am not sure witch Ctyle is controlling that at this point.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35021763
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.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35021804
I seem to have the spacing for the top nav but the sub menu is really messed up It is not dropping down.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 3

Author Comment

by:jbrashear72
ID: 35021812
I added them back. they are only under the proceedures.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35023837
Got any idea why the Sub menu is not working?
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35023862
I will take a look. I had to get caught up on some work. I will reply back with my findings.
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 500 total points
ID: 35024144
Well this is a little bit overdone, but I didn't have time to tweak it tonight.

This should be easier for you to adjust, it fits your theme a little better. Tomorrow after work I can take a look at if you are still having issues.

#menu-main,#menu-main a
{
  list-style:none;
  background:#FFF;
  height:100%!important;
  overflow:visible;
  margin:0;
  padding:0;
}

#menu-main a:hover
{
  list-style:none;
  color:#000!important;
  background:transparent!important;
}

#menu-main
{
  line-height:1.5em;
  position:relative;
  z-index:100;
}

#menu-main ul
{
  position:absolute;
  top:-999em;
  width:191px;
  z-index:100;
}

#menu-main ul li
{
  width:100%;
}

#menu-main li:hover
{
  visibility:inherit;
}

#menu-main li
{
  float:left;
  position:relative;
}

#menu-main a
{
  display:block;
  position:relative;
}

#menu-main li:hover ul,.sf-menu li.sfhover ul
{
  left:0;
  top:35px;
}

ul#menu-main li li:hover ul,ul.sf-menu li li.sfhover ul
{
  left:171px;
  top:0;
}

ul#menu-main li li li:hover ul,ul#menu-main li li li.sfhover ul
{
  left:15em;
  bottom:5em;
  top:0;
}

ul#menu-main
{
  font-family:"Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif;
  font-size:11px;
  float:right;
  position:relative;
  list-style-type:none;
  list-style-position:outside;
  text-transform:uppercase;
  padding-left:8px;
}

#menu-main li a
{
  display:block;
  text-decoration:none;
  color:#000;
  padding:12px 17px;
}

#menu-main li a:hover
{
  display:block;
  text-decoration:none;
  color:#000;
  background:#FFF;
  padding:12px 17px;
}

#menu-main a,#menu-main a:visited
{
  color:#000;
}

#menu-main li li
{
  background:#fff;
  border-top:1px solid #fff;
  border-bottom:1px solid #a5a5a5;
}

#menu-main li li a,#menu-main li li a:visited
{
  color:#666;
  margin-right:0;
}

#menu-main li li:hover,#menu-main li li.sfhover
{
  color:#176c97;
  background:#fff;
  outline:0;
}

#menu-main li ul
{
  margin-left:0;
  padding-top:20px;
}

#menu-main li ul li ul
{
  margin-left:1px;
  margin-top:-1px;
  background:none;
  padding-top:0;
}

#menu-main li.current-cat a,#menu-main li.current_page_item a
{
  display:block;
  text-decoration:none;
  color:#fff;
  background:#FFF;
  padding:12px 17px;
}

#menu-main li.current-cat li a,#menu-main li.current_page_item li a
{
  color:#666;
  margin-right:0;
  background:#fff;
}

#menu-main li.current-cat li a:hover,#menu-main li.current_page_item li a:hover
{
  color:#000;
  margin-right:0;
  background:#fff;
}

ul#menu-main li:hover li ul,ul#menu-main li.sfhover li ul,ul#menu-main li li:hover li ul,ul#menu-main li li.sfhover li ul
{
  top:-999em;
}

#menu-main li li a:hover,#menu-main li li li
{
  background:#fff;
}

#menu-main a:focus,#menu-main a:hover,#menu-main a:active,#menu-main li li a:focus,#menu-main li li a:hover,#menu-main li li a:active
{
  color:#000;
  outline:0;
}

#menu-main li li.current-cat a,#menu-main li li.current_page_item a,#menu-main li li.current-cat a:hover,#menu-main li li.current_page_item a:hover
{
  color:#000;
  margin-right:0;
  background:#fff;
  font-weight:700;
}

Open in new window

0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35024150
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.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35024180
Man I apreciate it. DO just replace all the CSS that is inside the file itself I am sorta a novice.. =) but learning!
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35024442
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.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35027954
As far as the main menu items that are using the images. Do I add those to the bottom of this ctyle?
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35027968
#menu-item-432 {
    text-indent: -9999px;
    width: 1px;
      margin-right: 19px;
}
 
#menu-item-432 a {
    background: url(<?php bloginfo('template_url'); ?>/images/navi_ourfacility.jpg) top center no-repeat !important;
      
}
 
/* 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.jpg) top center no-repeat !important;
}
 
/* 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.jpg) top center no-repeat !important;
}
/*  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_mapsdirections.jpg) top center no-repeat !important;
}
/* 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.jpg) top center no-repeat !important;
}
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35038450
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35039398
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:
#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;
}

Open in new window

0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now