Social icons in New Menu

Hi everyone,

I want to have several social icons and a 'Log in' link in a separate menu that will sit on top of the header, in the right corner. The idea is to be able to enter and modify those through the WP - Menus admin.

So I created a new menu and prepended it to the header. After some 'wrangling' with the CSS, I managed to have the new menu in the location where I wanted it, Please see the screenshot.

And here is the code :

add_action( 'init', 'register_my_menus' );

function register_my_menus() {

 register_nav_menus(
   array(
      'new-menu' => __( 'New Menu' ),
     'another-menu' => __( 'Another Menu' ),
     'an-extra-menu' => __( 'An Extra Menu' )
      )
 );

}

add_action( 'beans_header_prepend_markup', 'ymnav_above_header' );

function ymnav_above_header() {

  echo beans_open_markup( 'ymnavtop', 'div', array( 'class' => 'ymnav-top uk-container uk-container-center' ) );

    wp_nav_menu( array( 
      'menu' => 'New Menu',
     'container' => 'div',
     'container_class' =>  'uk-align-medium-right', 
     'theme_location' => 'new-menu',
     'beans_type' => 'navbar'
    ) );

  echo beans_close_markup( 'ymnavtop', 'div' );

}

So, I'm almost there.

Now, in the WP Menus admin, I created 'Custom links' and gave each an URL. For example : http://facebook.com .

Now, Wordpress doesn't allow a menu item without anything in the 'Navigation Label', so I used the non-breaking space element   and then added the UIkit classes uk-icon-facebook and uk-icon-button . It looks fine, after some styling with CSS, but now what I have is that the actual anchor link is showing below the icon, so that clicking on an icon doesn't link to anything. Please see the screenshot

Can anyone please tell me what I'm doing wrong ?

Hey Yuna, I have a similar social menu. My code:

// Register new Top Social Menu
add_action( 'init', 'j0e_register_my_social_menu' );

function j0e_register_my_social_menu() {

    register_nav_menu( 'social-menu', __( 'Social Menu' ) );
}

// Add the new Top Social Menu
beans_add_smart_action( 'beans_header_before_markup', 'j0e_social_menu' );

function j0e_social_menu() {

  if ( has_nav_menu( 'social-menu' ) ) {

    echo beans_open_markup( 'j0e_social_bar-container', 'div', array( 'class' => 'j0e-social-bar' ) );

      wp_nav_menu( array(
         'menu' => 'Social Menu',
          'menu_class' => 'uk-subnav uk-navbar-flip',
         'container' => 'div',
         'container_class' => 'uk-container uk-container-center',
          'theme_location' => 'social-menu',
          'beans_type' => 'navbar'
      ) );

    echo beans_close_markup( 'j0e_social_bar-container', 'div' );

 }

}

beans_remove_attribute( 'beans_menu[_navbar][_social-menu]', 'class', 'uk-navbar-nav' );

I also tried with the "uk-icon-button" markup. Its working fine for me.

How have you added the menu items? In that way?

<i class="uk-icon-button uk-icon-facebook"></i>

Might be a dumb question, but would it not be easier to add an unordered list styled with uikit's uk-navbar? Alternatively, uk-icon-button? For example <a href="#" class="uk-icon-button uk-icon-twitter"></a>

Is there are specific reason as for why to use wp_nav_menu?

Hey J.C.,

The main reason is to give the option to the site owner to add the menu items from the WP admin , but you're right , there is really no reason other than this, that I wouldn't do it your way.

So, using the WP admin is my first choice, but thank you for reminding me of the other option. Sometimes I get stuck in trying to solve a problem in one particular way :-).

Hey Jochen,

Thank you very much for your code and for showing the Menu Admin too. I was adding uk-icon-button uk-icon-twitter as a class to each Custom Menu link also in the WP Menu admin, and for the 'Navigation Label', or in your screenshot 'Angezeigter Name' , I was using the   , which is a trick I used with some other themes with WP before. But of course, it created problems here.

Your code works, and I may end up using it, so I'm really grateful for your help. 🙂 But it's not 100% what I was trying to do.

Your code, because it adds the Socal menu to beans_header_before_markup ends up pushing the header down, to create room for the Social menu navbar. Which is perfectly usable for many applications.

What I was hoping to figure out - is to have the new menu on top of the header image, sort of like this . In other words, I was trying to use beans_header_prepend_markup , rather than beans_header_before_markup. But what happens is that the links stop working - when I do that. Not sure how to find a way around this.

Any suggestion would be appreciated.

Cheers,

YunaM

Ok, I think I have it figured out.

I kept the beans_header_before_markup , but just removed the uk-container uk-container-center and added a custom css class there, which I will style myself, or may figure out some other UIkit utility class that would work here, when it comes to the responsiveness.

Thinking back, it's sort of obvious ... but anyway, there a number of moving parts here, and I can only look at them one at a time...

But now the links work and they are on top of the header image, like this screenshot. I still need to style the individual 'Log In' link, and the positioning, but the things are in place now.

I'm so happy 🙂 .

Jochen, thank you very much !!!

Cheers,

YunaM

@J.C. Meijers I had it before in the way you mentioned it. But I want to share my themes, so they have to be user friendly.

Yuna, glad I could help