So many things beans can do it's crazy! good crazy!
How would you move the logo between the menu and keep the default structure on mobile with the logo/text appearing centered?
Hi Dee, I am not sure I understand what you mean by "Moving the logo between the menu". Could you clarify what you mean or even better, provide a mockup of what you are after?
Thanks,
I want to center the primary menu and move the site header text / logo from the left alignment to between the links.
so I assumed that I would have to remove the current content in the header and add 3 grids. add a secondary menu to the left grid (2 menu links) the logo in the middle and primary to the right grid (2 menu links)?
I'm understanding that you want to create something like this:
https://www.dropbox.com/s/tnim05so258dq7z/Screenshot%202017-01-19%2015.08.45.png?dl=0
You probably have to create two menus, and put the logo between them. Unless it can be hacked with JS or something.
Yes Olaf. I've come across ways to do this outside of beans. I would think I just need to rewrite the default header and follow through with the tutorials on the b
Hey guys,
So let's have a bit of fun 🙂 Here is a snippet that does some maths to find the middle menu item and move the core Beans site branding after it, and centers the 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' );
} );
}You will notice that we enqueue the UIkit flex component used to center the menu properly. This is what you should see out of the box. All is left is to set your logo image in the backend Customizer.
The cool thing is that if you can add/remove menu items and the site branding will automatically be appended in the middle.
Other than using PHP you could also do it using CSS but I just thought it would be more fun using PHP and demonstrate what can be done with Beans 🙂
Have fun,
YES!!!
That's perfect! I know there was another way!
Thanks Thierry!
Just a general question - How would I add this to a page template (cleaning up function file) I would want it only on front page? or do I just use conditional tag instead?
I know it's 'wp' that needs to change.
Hey Dee,
Great initiative on keeping your functions.php file clean 😉 For that, you should create a file in your child theme named front-page.php. Theoritically, you could completely suppress the wp callback function and have all the code inside that function called straight into the file. That said, because we are sort-circuiting the function if there is no menu item and to keep the file cleaner, I would still advise to keep the same structure and use the beans_before_load_document action instead of wp. Make sure to call beans_load_document() at the bottom for you file, which always has to be called in template files. Here is what your front-page.php would be like:
<?php
/**
* Front page template.
*
* @package Example
*/
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
/**
* Enqueue the UIkit component.
*/
function example_enqueue_uikit_assets() {
beans_uikit_enqueue_components( array( 'flex' ) );
}
add_action( 'beans_before_load_document', 'example_view_site_branding' );
/**
* Site branding modifier.
*
* Center primary menu and move site branding in the middle.
*/
function example_view_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' );
} );
}
// Load the document which is always needed at the bottom of page templates.
beans_load_document();Happy coding,
Do I need to reset the structure on mobile (480 break point) so it appears as the default - branding on left and hamburger on right instead of centered?
Thanks Thierry.
Hi Dee,
Since all the modifications are done via PHP, you can not do @media queries like you would do in CSS. What you can do is add the following snippet at the beginning of your example_view_site_branding() function:
// Stop here if viewed from a mobile device.
if ( true === wp_is_mobile() ) {
return;
}That would prevent the centering for all mobile devices. Note that this only applies on load (not on window resize).
If you want to do it using @media queries which would probably be better in your case, you would have to do it via CSS or LESS.
Happy coding,
Ignore
Ignore