• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Mag Pro: Include Logo in Primary Nav

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: resolved

Tagged: Logo, Magazine Pro, menu

  • This topic has 14 replies, 3 voices, and was last updated 9 years, 2 months ago by nutsandbolts.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 5, 2013 at 7:29 am #71040
    ithacaindy
    Member

    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
    November 5, 2013 at 11:59 am #71071
    nutsandbolts
    Member

    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+

    November 5, 2013 at 3:25 pm #71114
    jmrallen
    Member

    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.

    November 5, 2013 at 10:04 pm #71191
    ithacaindy
    Member

    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

    November 5, 2013 at 10:06 pm #71192
    nutsandbolts
    Member

    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+

    November 5, 2013 at 10:12 pm #71193
    ithacaindy
    Member

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

    November 5, 2013 at 10:15 pm #71195
    nutsandbolts
    Member

    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+

    November 5, 2013 at 10:50 pm #71200
    ithacaindy
    Member

    It's back.

    November 5, 2013 at 10:54 pm #71201
    nutsandbolts
    Member

    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+

    November 6, 2013 at 8:24 am #71239
    ithacaindy
    Member

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

    November 6, 2013 at 8:25 am #71240
    nutsandbolts
    Member

    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+

    November 6, 2013 at 9:22 am #71251
    ithacaindy
    Member

    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;

    }

    November 6, 2013 at 9:25 am #71252
    nutsandbolts
    Member

    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+

    November 6, 2013 at 10:07 am #71261
    ithacaindy
    Member

    That did it. Thanks for the assist, Andrea.

    November 6, 2013 at 10:09 am #71263
    nutsandbolts
    Member

    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
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Mag Pro: Include Logo in Primary Nav’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble