Social Media Menu Alignment

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' );

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

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.

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,

Fantastic! Thank you both very much.