How to switch logo and menu in Callaway

Hi Matthew-

The Callaway theme is designed with the logo on the right and the menu on the left, but you can accomplish this with a little effort. If you’re interested in designing your header without using any code, I recommend checking out the Crio Supertheme.

If you’d like to go ahead and do it in Callaway, here’s how.

First, install and activate the Code Snippets plugin. Then, navigate to Snippets > Add New and paste the following code into your new snippet:

function bgsc_swap_logo_menu_callaway( $configs ) {
	$configs['template']['locations']['header']['6'] = array( '[action]boldgrid_site_identity' );
	$configs['template']['locations']['header']['7'] = array( '[action]boldgrid_primary_navigation' );
	
	return $configs;
}
add_filter( 'boldgrid_theme_framework_config', 'bgsc_swap_logo_menu_callaway', 11 );

This code will swap the default locations of your logo and your menu. The first time you save it, I strongly recommend setting it to Only run once. That way, if you’ve made any typos, your site will only crash once and you can simply reload the page. If your site did not crash when you ran it once, set it to only run on site front-end and save and activate it.

Then, you’ll need to add a little Custom CSS to make sure they’re properly aligned in their new locations. Navigate to Customize > Advanced > Custom JS & CSS and paste the following into your Custom Theme CSS:

@media only screen and (min-width: 992px) {
	.site-title, .site-description { text-align: left; }
}
@media only screen and (min-width: 768px) {
	.navbar-default .navbar-nav, .navbar-default .navbar-nav .open .dropdown-menu {
		float: right;
		text-align: right;
	}
}