Place Primary Nav Inline with Header Logo

Hi Alex,

It’s possible with some customisation. It would mostly involve CSS, as well as perhaps unhooking the primary navigation function and rehooking it back in a different location. If you’re comfortable with the concept of hooks/actions and good with CSS this should be fairly simple to achieve.

If you don’t want to dive in to the code, our Storefront Designer extension includes an option to do exactly this built in.

Cheers

Many thanks James,

I feel comfortable coding it manually.

It looks like I may need to remove the primary navigation, using:

add_action( 'init', 'jk_remove_storefront_primary_nav' );
function jk_remove_storefront_primary_nav() {
remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
}

…and then style using CSS.

Would using this hook/action fix the problem of the secondary nav disappearing in mobile view, or would I need to rehook it somehow?

…perhaps something like this?

function jk_add_storefront_primary_nav() {
add_action( 'storefront_header', 'storefront_secondary_navigation', 50 );
}

I’d appreciate any corrections to this code that you could send.

I don’t think you’d want to remove the primary navigation. I thought you wanted to display it?

Sorry for the confusion. The idea to remove the primary navigation came from the instructions that were provided on this other forum post.

I’m basically looking for the hook that I’d need to use to get the navigation to appear to the right of the logo (instead of under it).

I just used an alternative approach which seems to work.

I opened up the file at wp-content/themes/storefront/inc/structure/header.php, and went to line 54.

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php _e( 'Primary Navigation', 'storefront' ); ?>">

Then, I placed a div for my logo right after the code on line 54.

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php _e( 'Primary Navigation', 'storefront' ); ?>"><div id="siteLogo"> ... logo goes here ... </div>

The logo then appears inline with, and just to the left of, the primary navigation.

My only question now is how to copy this header.php file to my child theme’s directory, so that it doesn’t get overwritten by the next update.

Normally, I would just copy the header.php file into the child theme folder, but in the case of the Storefront theme there are two header.php files: one at wp-content/themes/storefront/header.php, and another at wp-content/themes/storefront/inc/structure/header.php.

My guess is that I’d copy the header.php that’s in the inc folder over to my child theme’s folder. Does this sound right?

I got it to work. For anyone else that’s looking to get the logo to be inline with the main navigation you can add the following in your child theme’s functions.php file.

add_action( 'init', 'storefront_inline_logo' );
function storefront_inline_logo() {
	remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
	add_action( 'storefront_header', 'storefront_display_inline_logo', 50 );
}

function storefront_display_inline_logo() {
?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php _e( 'Primary Navigation', 'storefront' ); ?>"><div id="myInlineLogo"> ... logo goes here ... </div>
		<button class="menu-toggle"><?php echo esc_attr( apply_filters( 'storefront_menu_toggle_text', __( 'Navigation', 'storefront' ) ) ); ?></button>
			<?php
			wp_nav_menu(
				array(
					'theme_location'	=> 'primary',
					'container_class'	=> 'primary-navigation',
					)
			);

			wp_nav_menu(
				array(
					'theme_location'	=> 'handheld',
					'container_class'	=> 'handheld-navigation',
					)
			);
			?>
		</nav><!-- #site-navigation -->
		<?php
}

James, thanks again for your advice on unhooking the primary navigation!