![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/893b2c023a6d7cceb097ac69eb1ea2f6-87a1c39.jpg)
Hi guys, What's the best way to float a social media menu to the left or right of main navigation that is centered?
I've been struggling for a few hours now after playing with Beans for a couple of days. I really love it so far but feel like I'm missing something really obvious.
This is what I have so far based on bits I've picked up from reading this forum.
Thanks in advance!
beans_remove_attribute( 'beans_site_branding', 'class', 'uk-float-left' );
beans_replace_attribute( 'beans_primary_menu', 'class', 'uk-float-right', 'uk-text-center' );
beans_add_attribute( 'beans_menu[_navbar]', 'class', 'uk-display-inline-block' );
beans_add_attribute( 'beans_menu_item', 'class', 'uk-text-center' );
// Register new Top Social Menu
add_action( 'init', 'register_my_social_menu' );
function register_my_social_menu() {
register_nav_menu( 'social-menu', __( 'Social Menu' ) );
}
// Add the new Top Social Menu
beans_add_smart_action( 'beans_header_prepend_markup', 'DH_social_menu' );
function DH_social_menu() {
if ( has_nav_menu( 'social-menu' ) ) {
echo beans_open_markup( 'DH-social-bar', 'div', array( 'class' => 'uk-grid' ) );
wp_nav_menu( array(
'menu' => 'Social Menu',
'menu_class' => 'uk-subnav uk-navbar',
'container' => 'div',
'container_class' => 'uk-width-medium-1-4 uk-row-first',
'theme_location' => 'social-menu',
'beans_type' => 'navbar'
) );
echo beans_close_markup( 'DH_social_bar-container', 'div' );
}
}
beans_remove_attribute( 'beans_menu[_navbar][_social-menu]', 'class', 'uk-navbar-nav' );
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/19fc55df0a7382c19e4480349fee60fa-87a1c39.jpg)
Hello Alex,
Maybe I have misunderstood your question, but this is how I would add social icons in the header, attached to the main menu.
function myprefix_add_menu_items() {
echo '<div class="uk-float-right uk-margin-left">';
echo '<a href="#" class="uk-icon-button uk-icon-twitter uk-margin-small-left"></a>';
echo '<a href="#" class="uk-icon-button uk-icon-instagram uk-margin-small-left"></a>';
echo '<a href="#" class="uk-icon-button uk-icon-facebook uk-margin-small-left"></a>';
echo '</div>';
}
add_action( 'beans_primary_menu_append_markup', 'myprefix_add_menu_items' );
Hope it helps.
Mat
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/893b2c023a6d7cceb097ac69eb1ea2f6-87a1c39.jpg)
Mat - Thank you so much! I was over complicating it by trying to use a social media menu that wp generates in the admin panel.
It works really well now. Still getting my head around how UIKIt and Beans work together. Great stuff.
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
Great stuff guys,
Just a quick note, it is better to output HTML without echoing it where possible. To take @matman example, I would suggest:
function myprefix_add_menu_items() {
?>
<div class="uk-float-right uk-margin-left">
<a href="#" class="uk-icon-button uk-icon-twitter uk-margin-small-left"></a>
<a href="#" class="uk-icon-button uk-icon-instagram uk-margin-small-left"></a>
<a href="#" class="uk-icon-button uk-icon-facebook uk-margin-small-left"></a>
</div>
<?php
}
add_action( 'beans_primary_menu_append_markup', 'myprefix_add_menu_items' );
Keep up the good work guys,
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/893b2c023a6d7cceb097ac69eb1ea2f6-87a1c39.jpg)
Fantastic! Thank you both very much.