Align Logo Left With Menu Right In Essence Pro

Jan 7, 2020

—

This tutorial shows you how to reposition the primary nav menu to the right inline with the custom logo on the left using the Essence Pro child theme by StudioPress.

The solution is mobile responsive as seen in the demo video.

Also, the method used doesn’t require any modification of the default code in Essence Pro.

Here’s the result for the desktop view :

Demo Video #

Shows the custom logo to the left and the primary nav menu moved so its inline with the logo on desktops and centered below the logo on smaller screens.

Installation Steps

There’s 3 steps :

# Step 1 – Upload your logo using Customize > Site Identity > Logo.

# Step 2 – Copy & paste the PHP code from the functions.php file to the end of the Essence Pro themes functions file.

Download Folder

Comments

2 responses to “Align Logo Left With Menu Right In Essence Pro”

John Peacock

July 26, 2020

I would like a tutorial on how to use ‘Align Logo Left With Menu Right In Essence Pro’ with ‘Add Header Right Widget For Social Icons To Essence Pro: https://wpsites.net/web-design/add-header-right-widget-for-social-icons-to-essence-pro/ ‘
to show header right widget in place of navigation.

So on large screens primary navigation will stay below the logo and the social icons will be aligned perfectly to the right of the logo.

On smaller screens, under 1024 px, the mobile hamburger menu will be to the right of the logo, then under that will be the list of social icons . When you click on the mobile menu it will open up under the logo and social icons.

…. . fun right 🙂

thanks for all your tutorials

Log in to Reply
1. Brad Dalton
  
  July 27, 2020
  
  No problem. Here’s the policy on additional tutorial requests. $75 https://wpsites.net/terms-of-service/#additional-tutorial-requests
  
  Log in to Reply

Join 5000+ Followers

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