• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

How To Add Or Move A Logo Image To Any Nav Menu

In this post, i’ll show you several different ways to add a logo image to either your primary or secondary navigation menu. Try this code if you only want to move your site title into your menu.

You’ll also be able to float your logo to the left or right of your menu items.

On top of this, you can easily change the position your image sits in your menu.

logo menu genesis

Here’s the PHP & CSS code you need to add at the end of your child themes functions.php & style.css files.

Register for full access

Other Cool Stuff You Can Do With Your Logo

  • Add Custom Logo In Menu of Magazine Pro Theme
  • Add Site Title Inline With Your Nav Menu Items
  • Add Logo Image Next To Title In StudioPress Themes

Reader Interactions

Comments

  1. Amber says

    November 28, 2014 at 4:09 am

    Hi Brad,

    I’ve got the logo sitting where I want it to in the nav bar now, but like the commenter above, I want to make the logo hyperlink back to the front page.

    I’ve tried the code you replied with above but don’t understand exactly where to add my URL and the image address. Can you please help? Thanks.

    add_filter( 'wp_nav_menu_items', 'wpsites_add_logo_nav_menu', 10, 2 );
    function wpsites_add_logo_nav_menu( $menu, stdClass $args ){
     
        if ( 'primary' != $args->theme_location )
            return $menu;
     
        $menu .= sprintf( '<a href="' . esc_url( home_url( '/' ) ) . '" rel="nofollow">%s', __( '') );
     
        return $menu;
     
    }
    Log in to Reply
    • Brad Dalton says

      November 28, 2014 at 4:48 am

      Are you a member of WP Sites Amber?

      Log in to Reply
  2. first says

    July 7, 2014 at 2:21 pm

    Hi Brad,

    Thanks for the code, it works perfectly.
    But I would like to create an grey hover effect when I pass the mouse on the logo, how do I do that please?

    Best,

    Log in to Reply
    • Brad Dalton says

      July 7, 2014 at 3:25 pm

      I think something like this should work but didn’t test it.

      .nav-logo:hover {
          opacity: 0.4;
          filter: alpha(opacity=40); 
      }
      Log in to Reply
  3. tom says

    February 25, 2014 at 12:10 pm

    I am trying to put a larger image than the height of the Nav Bar, The Nav Bar is adjusting to make up for the space, now I have a very high nav bar, is there a way to keep the nav bar the same height, but have the image over hang on the top and bottom?

    Log in to Reply
    • Brad Dalton says

      February 26, 2014 at 2:14 am

      Yes but i haven’t written about how to do that ye so try something like this http://cyberchimps.com/forum-topic/overhang-header-image/

      Log in to Reply
  4. Michelle says

    February 20, 2014 at 9:44 pm

    Not sure why, but the code didn’t paste in quite right. Basically, though, I just inserted the hyperlink code within the I’ll try again…

    Log in to Reply
  5. Michelle says

    February 20, 2014 at 9:39 pm

    Hi Brad,

    Just wanted to let you know that I fixed the issue. The needed to be inside the tag (see code below).

    Thanks so much for all of your assistance!

    Log in to Reply
    • Brad Dalton says

      February 20, 2014 at 9:44 pm

      Happy to help Michelle.

      Log in to Reply
  6. Michelle says

    February 18, 2014 at 4:26 am

    Hi — Thank you so much for this excellent code! One question — how can I make this logo hyperlink to my homepage?

    Log in to Reply
    • Brad Dalton says

      February 18, 2014 at 4:43 am

      Hello Michelle

      Code updated: Simply add your logo.png image file to your child themes images folder and use this code.

      This is not the only way to code this function.

      You could use a different class so it validates for W3 Standards (which i will do and update the code) and you could print the HTML for the image differently.

      Then add list-style-type to the declarations like this:

      .nav-logo {
      float: left;
      margin-right: 20px;
      margin-top: 20px;
      list-style-type: none;
      }

      And that now validates for W3.

      Log in to Reply
      • Michelle says

        February 19, 2014 at 4:50 am

        Hi Brad,

        Thanks so much for addressing this so quickly! I’m a little unclear on what you’re saying about validating for W3, however. Are you suggesting using the code you just provided with the modified CSS (the one that includes list-style-type: none;) or are you saying that the function would need to be different altogether to validate for W3?

        Also, I’m trying to ensure that when I insert the logo in the navigation menu, it remains to the left of all of the other links in the menu (like the sample images you show). But currently, the logo seems to jump to a second line below the other links in the menu if there are too many items in the menu or if the page size is reduced. How can I tell the function to load the logo first and always make it the first item at left in the menu?

        Thanks again for all of your help!

        Michelle

        Log in to Reply
        • Brad Dalton says

          February 19, 2014 at 2:22 pm

          You can skip that part as i i have updated the code and tested it.

          There’s many different ways to write code that does the same thing.

          PHP is only one side of the solution but doesn’t tell the browser where to output the HTML so you also need to add CSS.

          Its impossible to provide CSS code that works on every theme as there’s 1000’s which are all coded differently.

          I can only provide sample CSS which may need tweaking and/or additions of extra declarations.

          Little bit of work on your behalf is required.

          Watch out for a new post which includes another option for the CSS in a similar solution.

          Something like this may work if you change some of the values:

          .search-form {
          position: absolute;
          right: 105px;
          padding-top: 15px;
          width: 360px;
          list-style-type: none;
          }
          Log in to Reply
          • Michelle says

            February 19, 2014 at 9:55 pm

            Hi Brad,

            I apologize if I was unclear. The search field is fine and the logo is lining up on the left side. But, for some reason, the logo is showing up on a second line below the other menu items. Basically, I’m trying to get the logo to show at the beginning of the menu (the first item with subsequent menu items aligned to the right of the logo).

            How do I make the logo the first to display in the list rather than the last (as it currently is)?

            I understand that CSS is theme/site specific, but this seems like something that should be inserted in the function to tell the logo where to load within wp_nav_menu_items.

            Thanks again for all of your help!!

            Michelle

          • Brad Dalton says

            February 20, 2014 at 2:46 am

            The class is generated by the PHP function and then you use that class in a CSS rule with a declaration that includes a property and value.

            The code i published today may work. http://wpsites.net/web-design/how-to-position-get-search-form-in-nav-menu/

  7. Julie says

    January 4, 2014 at 8:14 pm

    Thank you for this tip.
    However in my twenty thirteen chip theme, my logo goes to the right of the navbar instead of left.
    What do you think I can do, to put it on the left ?
    Many thanks!

    Log in to Reply
    • Brad Dalton says

      January 4, 2014 at 8:18 pm

      All themes use different CSS so you will need to tweak the CSS.

      Change float:right to float:left.

      Log in to Reply
      • Julie says

        January 4, 2014 at 8:25 pm

        Actually this is already “float:left”. I copied/pasted exactly the code you wrote on your website

        Log in to Reply
        • Brad Dalton says

          January 4, 2014 at 8:30 pm

          Strange because the screenshot near the end of the post shows the result that it floats left when tested on Twenty Thirteen.

          What is this theme that you mentioned?

          twenty thirteen chip theme

          Log in to Reply
          • julie says

            January 4, 2014 at 8:35 pm

            I finally found my mistake! I did not put the css code in the right place, we have to copy it below the .navbar css.
            Now my logo is on the left.
            Thanks 🙂

          • Brad Dalton says

            January 4, 2014 at 8:37 pm

            That’s right.

            Always at the end of the file before the start of the Media Queries.

            That’s why its called a cascading style sheet!

    • julie says

      January 4, 2014 at 10:10 pm

      Sorry, it was twenty thirteen “child” theme (not chip!)

      Log in to Reply
      • Brad Dalton says

        January 4, 2014 at 10:26 pm

        Those little details are important when it comes to code. hahaha

        Log in to Reply
  8. Joyce Grace says

    January 2, 2014 at 3:54 am

    Something I really want to try is turning the logo into an SVG, importing that into the IconMoon app, making it part of an icon-font set and then resolving the retina display problem that way. The thing I haven’t tested yet is whether the CSS class on the WordPress menu item would work. I tried inserting a character code into the “Navigation Label” area of a WordPress Menu but that didn’t work, it won’t accept it. I should try a div in that area…a while ago HTML worked in Page Titles….hmmm….

    This would not work with multi-coloured logos but would be a really great solution for one-colour logos….

    Log in to Reply
    • Brad Dalton says

      January 2, 2014 at 12:59 pm

      Hello Joyce

      Interesting question.

      I guess you’ve already tried adding a class to the menu item and doing it that way?

      Log in to Reply
  9. Wayne Plant says

    January 1, 2014 at 7:09 am

    Great stuff Brad!
    I love these posts for the tips and information on modifying WP websites.
    Keep it up.

    Regards,

    Wayne Plant

    Log in to Reply
    • Brad Dalton says

      January 1, 2014 at 7:13 am

      Thanks for the kind words Wayne

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.