The solution in this tutorial enables you to display your logo inline with your nav menu items like you see in the following screenshot :
- Coded to display in the primary nav menu of the Magazine Pro child theme by StudioPress.
- Your image is added using the Site Identity setting in the WordPress customizer which is the recommended method used to add your logo in WordPress & Genesis.
- Displays perfectly inline with your nav menu items and doesn’t increase the default height of your menu.
- Can be used with any other menu and also displayed to the right of the menu items.
Installation Steps
There’s 2 steps you need to take to get the job done.
- # Copy & paste the PHP code from the file named functions-1.php to the end of the Magazine Pro themes functions file.
- # Copy & paste the CSS rules for solution 1 from the style-1.css file to the end of the Magazine Pro child themes style.css file and clear caching.
Note : You may need to modify the CSS if you modify the values in the custom-logo function for the width & height of the logo.
Not Using Custom Logo – Solution 2
If you prefer not to use the custom logo and want to use a image from your child themes images folder, follow these steps :
- # Copy & paste the PHP code from the file named functions-2.php to the end of the Magazine Pro themes functions file and upload a image named logo.png to your child themes images folder.
- # Copy & paste the CSS rules for solution 2 from the style-2.css file to the end of the Magazine Pro child themes style.css file and clear caching.
Was This Tutorial Helpful?