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
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
No problem. Here’s the policy on additional tutorial requests. $75 https://wpsites.net/terms-of-service/#additional-tutorial-requests