Mag Pro: Include Logo in Primary Nav

[ithacaindy]

I'd like to include our logo in the fixed primary nav menu of the Magazine Pro child theme. Is there a spot to the left of the menu items I can use, or can I use the logo image in place of the "home" menu item?

http://ithacaindy.com

[nutsandbolts]

You could add a CSS class to the Home menu item, then use that class to insert the logo as a background image via CSS.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[jmrallen]

That's exactly what I did on my site, Daily Game. I'm running a modified version of Magazine Pro there, and so far the logo in the primary nav is working great. Here's the tutorial I used to achieve the effect.

[ithacaindy]

I have the image appearing as a class of the "home" menu, but the text "home" still appears behind the logo. How do I remove the text - or obscure it?

Thanks, again.

ithacaindy.com

[nutsandbolts]

Under Appearance > Menus, open the Home menu item and take out the Navigation Label. Save and you shouldn't see the text anymore (but let me know if you do for some reason).

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ithacaindy]

I delete the text in the Navigation Label, then save - but the menu item vanishes, along with the logo image.

[nutsandbolts]

Okay, so the next needs to come back. Can you put the label back and let me take a look?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ithacaindy]

It's back.

[nutsandbolts]

Okay, try adding this to your stylesheet:

.menu-item-26963 {
text-indent: -9999px;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ithacaindy]

That gets rid of the menu item text but cuts my logo image vertically in half.

[nutsandbolts]

Have you set a width in your CSS class?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ithacaindy]

I fixed the width issue by adding the width parameter, but the issue of the menu item text not being pushed offscreen remains. Here are the two css descriptors:

.navlogo {
background: url(images/_Indy_Logo-White2.png) no-repeat left center;
padding: 3px 0 1px 20px;
width: 100px;
}

.menu-item-26963 .nav-primary ul li a a:hover {
text-indent: -9999px;

}

[nutsandbolts]

Try adding text-indent: -9999px; to your .navlogo rules - that works in Firebug (though, as we're seeing, it doesn't always translate in real life).

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ithacaindy]

That did it. Thanks for the assist, Andrea.

[nutsandbolts]

Glad it's finally working! If you don't mind, please mark this topic as resolved so we'll know you've been helped. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts