Menu Logo Menu For Twenty Nineteen Theme

The solution in this download folder enables you to create a split menu which displays menu logo menu in non Genesis themes. In this case, we’re using the Twenty Nineteen default theme for WordPress.

This solution can be used in any theme which uses get_template_part rather than hooks.

The CSS is written assuming a custom logo size of 190px square.

The code is pre-installed in a child theme for Twenty Nineteen you can easily install like any other theme.

Demo Video

Shows 2 new custom menus added named left and right which display either side of the centered logo.

The menu items display inline on wider screens and block when the screen reduces in size.

On the smallest of screens, the menu items display below the logo.

Note : This solution removes the social menu from the header.

Installation Steps

If you haven’t created a child theme for Twenty Nineteen, simply install the zipped folder from the download folder as a new theme and assign menus to the left and right menu locations as seen in the demo video.

If you already have a child theme for Twenty Nineteen installed, follow these instructions to install the code.

There’s 3 steps :

1. # Copy the PHP code between lines 26 – 34 of functions.php and paste to the end of your child themes functions file.

 


2. # Copy the folder named template-parts and paste it in the root directory of your child theme like this :

 


3. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

 

You can then assign menus to the left and right menu locations like this example :

Download Folder