WP SITES

Log in

Add Logo In Nav Menu in Genesis

—

by

Brad Dalton

This tutorial shows you how to add an image to the left of the primary nav menu in any child theme by StudioPress.

The method should work on other child themes however may need some tweaking of the CSS values.

You’ll find 2 methods in this post:

  1. The 1st adds an unlinked image before the menu and includes the full image link in the code. Tested on the Enterprise Pro theme

    2. enterprise-pro

  2. The 2nd adds a linked image before the menu and pulls the image from your child themes images folder. Tested on the Agency Pro theme.

    3. agency-pro

The PHP code and CSS for both methods are different.

Here’s the code:

Register for full access

Related Tutorials

Comments

9 responses to “Add Logo In Nav Menu in Genesis”

  1. Lobsang Wangdu Avatar
    Lobsang Wangdu

    Hi Brad,

    I would like to add a logo left side of nav-primary area on the Genesis sample theme. I have try to use your above code but didn’t work. Do you have any other code that I can use?

    Thank you,

    Lobsang

    1. Brad Dalton Avatar
      Brad Dalton

      Dear Lobsang. Works when i re-test the code. Maybe you have the minification problem with your CSS again or you forgot to swap out the link to your logo in the PHP code. See the video which shows how to install the code

      https://youtu.be/PHOw1yzqEl4

      If you’re still having issues, send me FTP access and i’ll install the code for you!

      1. Lobsang Wangdu Avatar
        Lobsang Wangdu

        Thank you Brad!

        First tried your sound option “linked image” that didn’t work some reason but the first option works great. Thank you for your help!

        Lobsang

        1. Brad Dalton Avatar
          Brad Dalton

          Tested both and they both work however you must swap out the path to the image in the PHP code. Maybe you missed that?

  2. Edward Labuschagne Avatar
    Edward Labuschagne

    I’m using news pro and want to get the logo in the secondary menu that displays at the top.

    Would the code then be: if ( ‘secondary’ != $args->theme_location ) ?

    1. Brad Dalton Avatar
      Brad Dalton

      Yes, and then add/tweak the CSS based on the size of your logo.

      1. Edward Labuschagne Avatar
        Edward Labuschagne

        Hi Brad,

        I decided to stick to the primary using this code:

        However, the logo does not appear and I don’t see any output in the HTML either, could you possibly help? Site is: https://sapigeon.co.za/

        Could it be because WordPress is installed in a subfolder and not directly in public_html?

        1. Brad Dalton Avatar
          Brad Dalton

          Assumes the path to the image is your child themes images folder. You can send me access details and i’ll fix if you can’t.

          1. Edward Labuschagne Avatar
            Edward Labuschagne

            Awesome! I’ll message you on facebook.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.