Mag Pro: Include Logo in Primary Nav

Community Forums Forums Design Tips and Tricks Mag Pro: Include Logo in Primary Nav

This topic is: resolved

This topic contains 14 replies, has 3 voices, and was last updated by  nutsandbolts 11 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #71040

    ithacaindy
    Participant
    Post count: 47

    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
    #71071

    nutsandbolts
    Moderator
    Post count: 3173

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71114

    jmrallen
    Participant
    Post count: 59

    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.

    #71191

    ithacaindy
    Participant
    Post count: 47

    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

    #71192

    nutsandbolts
    Moderator
    Post count: 3173

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71193

    ithacaindy
    Participant
    Post count: 47

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

    #71195

    nutsandbolts
    Moderator
    Post count: 3173

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


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

    #71200

    ithacaindy
    Participant
    Post count: 47

    It’s back.

    #71201

    nutsandbolts
    Moderator
    Post count: 3173

    Okay, try adding this to your stylesheet:

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

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

    #71239

    ithacaindy
    Participant
    Post count: 47

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

    #71240

    nutsandbolts
    Moderator
    Post count: 3173

    Have you set a width in your CSS class?


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

    #71251

    ithacaindy
    Participant
    Post count: 47

    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;

    }

    #71252

    nutsandbolts
    Moderator
    Post count: 3173

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71261

    ithacaindy
    Participant
    Post count: 47

    That did it. Thanks for the assist, Andrea.

    #71263

    nutsandbolts
    Moderator
    Post count: 3173

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Mag Pro: Include Logo in Primary Nav’ is closed to new replies.