• 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

Menu Logo Menu Using CSS Grid In Parallax Pro

The solution in this download folder enables you to display the primary menu to the left, the header image in the middle and the secondary menu to the right, all inline and centered vertically and horizontally using CSS Grid.

genesis menu logo menu

On smaller screens, the menu items change from inline to block like this :

Genesis Menu Items Display Block

And like this on mobiles :

Genesis Header Image Before Responsive Menu Icon

You can see how this works in the following demo video.

Demo Video

Shows the menu logo menu displaying on desktops using the Parallax Pro child theme by StudioPress.

Installation Steps

There’s 4 steps :

Register for full access


# Step 3 – Copy & paste the CSS from the style.css file to the end of the Parallax Pro themes style sheet and clear caching.

Step 3

# Step 4 – Create 2 menus named Primary and Secondary and assign them to the header left and header right locations like this :

Step 4

Note : In the download folder you will find a copy of the functions.php file with the PHP modified as instructed in steps 1 and 2.

Download Folder

Related Tutorials

  • Menu Logo Menu In Genesis Sample Themes Header
  • Menu Logo Menu in Genesis Header
  • Custom Menu – Logo – Custom Menu Using 3 Widgets in Header

CSS Grid Columns Header Image Nav Menu Parallax Pro Theme

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.