Split navigation in Aspire Pro

A user asked,

I want to change the layout of this theme http://demo.appfinite.net/aspire/. The site title/description is to the left and the menu to the right. I want to have the site/description moved to the middle with the menu items on right and on the left of the site title/description.

In this tutorial, I share the steps to display header image (logo) uploaded in customizer in the center of primary nav menu items.

The nav bar will smoothly shrink as the user scrolls down and remains fixed.

At smaller widths, the logo will appear above the hamburger menu icon.

Step 1

Edit Aspire Pro's functions.php.

a) In this example I want to show logo image at 100px x 100px. As such change

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'flex-height'     => true,
	'width'           => 300,
	'height'          => 60,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

to

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'flex-height'     => true,
	'width'           => 100,
	'height'          => 100,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

b) At the end of the file add