Center logo between menu

Here is code to center the logo between a centered menu. The end results for a site I am working on looks like the below.

First you need to add the logo into the Site Identity section of the Customizer. Then we can add the code to the functions file and the style.css file.

Thierry added the following code to this support thread:
https://community.getbeans.io/discussion/logo-between-menu

// https://community.getbeans.io/discussion/logo-between-menu
// Enqueue the UIkit component.
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {
  beans_uikit_enqueue_components( array( 'flex' ) );
}

// Center primary menu and move site branding in the middle.
add_action( 'wp', 'example_site_branding' );

function example_site_branding() {
 // Get all primary menu items.
  $items = wp_get_nav_menu_items( beans_get( 'primary', get_nav_menu_locations() ) );

 // Stop here if empty.
  if ( empty( $items ) ) {
    return;
 }

 // Count all the parents menu items and find the middle index.
  $items = wp_filter_object_list( $items, array( 'menu_item_parent' => 0 ) );
 $index = floor( count( $items ) / 2 ) - 1;
  $id = beans_get( 'ID', beans_get( $index, $items ) );

 // Move the site branding in the middle of the navigation.
  beans_modify_action_hook( 'beans_site_branding', "beans_menu_item[_{$id}]_after_markup" );

  // Adjust styling to center menu.
 beans_replace_attribute( 'beans_primary_menu', 'class', 'uk-float-right', 'uk-flex uk-flex-center' );
 beans_add_attribute( 'beans_site_branding', 'class', 'uk-text-center' );
  beans_add_attribute( 'beans_menu_item', 'class', 'uk-text-left' );

  // Remove the site branding to all the menus rendered after the primary menu.
 add_action( 'beans_primary_menu_after_markup', function() {
   beans_remove_action( 'beans_site_branding' );
 } );
}

// Stop here if viewed from a mobile device.
if ( true === wp_is_mobile() ) {
 return;
}

I also added the following CSS:

.tm-logo {
  width: 90px;
  margin-top: -50px;
}

.tm-site-branding, 
.tm-site-branding a {
  width: 150px;
}

I defined the width of the logo and then the width of the site branding area. Adjusting the site branding area will bring the menu closer or further away from the logo.

Filed under: Learning

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website