• 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

Add Image To Nav Menu Using Customizer

The code in this download folder enables you to add an image via your customizer to your nav menu. In this case, the primary menu however you can change the name of the location in the code to secondary or any other menu location.

Demo Video

Shows the image from the customizer added as the first primary menu item in the site header on desktops and before the menu items in the mobile responsive drop down menu.

Tested using the Genesis Sample child theme by StudioPress however will work in any WordPress theme however the CSS may need tweaking.

Installation Steps

There’s 2 steps.

  1. # Copy & paste the PHP code ( excluding the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
  2.  

  3. # Copy & paste the CSS from the style.css file to the end of your style sheet and clear caching and minification.
  4.  

Once you’ve installed the code, you can then upload an image named logo.png to your child themes images folder which displays by default unless you change the image using the customize > Nav Menu Logo setting.

Download Folder

Hide Image In Responsive Menu

Add this CSS to your style sheet if you want to remove the image when the responsive mobile menu is active.

@media only screen and (max-width: 960px) {

.genesis-nav-menu .menu-logo {
display: none;
}

}

Related Tutorials

  • Change Logo To Site Title When Responsive Menu Displays & Add Logo To Mobile Menu

Customizer Nav Menu

Reader Interactions

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.