Menu next to header – Possible?

[kimchan]

We have had a request to move the menu next to the header in a Swagger theme we are using. Is this possible and if so can you tell us how to do it?

Thanks in advance.

Topic

[Jason Bobich]

Hello,

This will be a customization you’ll need to make to the theme. There are several ways you could possibly accomplish it, but there’s not going to be any simple 1-steppers I can give you. You need to hook the menu where you want and then style it to work in that location.

http://dev.themeblvd.com/tutorial/actions/

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

If you’re uncomfortable creating your own function that contains wp_nav_menu to output your menu location, you could just use the theme’s default function and move it.

You can look at the action map, but I’d imagine the logical place to put it would be the “themeblvd_header_addon” hook.

// Remove default menu from "themeblvd_header_menu" action
remove_action( 'themeblvd_header_menu', 'themeblvd_header_menu_default' );

// Add default menu function to "themeblvd_header_addon" action
add_action( 'themeblvd_header_addon', 'themeblvd_header_menu_default' );

But that’s just going to get the HTML markup in the right place. From there, you’re still going to have to style everything to be positioned where you want with CSS.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[kimchan]

Hi there Jason!

Thanks for all the help — the above worked like a charm in the child theme functions.php.

One question: With this change, when the screen size is tablet sized the navigation goes over the logo on the left — is there any way to fix this just for this resolution? The small and the full screen look fine.

[kimchan]

Hi Jason…just thinking…

it would even be okay if it went to the simple select menu that currently shows on the mobile — doable?

[Jason Bobich]

This would all just be done within your Custom CSS. You can target your different elements via @media viewport sizes like this:

/* Tablets */
@media (max-width: 800px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Mobile */
@media (max-width: 480px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

You can utilize display: none; to hide something and display: block; to show it.

[Author]

Replies