Wednesday, December 8th, 2021

Add Image to Nav Menu Using Customizer

The code in this Downloads folder enables you to add an image to your navigation menu via its optimizer. In this case, the primary menu though you can change the location name 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 desktop and before the menu item in the mobile responsive drop down menu.

Tested using the Genesis sample child theme by StudioPress, it will work in any WordPress theme, although CSS may require tweaking.

installation steps

2 steps.

  1. # Copy and paste the PHP code (excluding the opening PHP tag) from the functions.php file to the end of your child theme function file.
  2. # Copy and paste the CSS from the style.css file to the end of your style sheet and clear caching and minification.

Once you have the code installed, you can upload an image named logo.png to your child theme images folder, which is displayed by default unless you go to the Customize > Nav menu logo setting Do not change the image using .

download folder

hide image in responsive menu

If you want to remove the image when responsive mobile menu is active then add this css to your style sheet.

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

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

}

Related Tutorials

reader interaction

Source link