I have figured out how to add a social menu to the top of my website using the following code:
function social_menu() {
if ( has_nav_menu( 'social-menu' ) ) {
echo beans_open_markup( 'social_bar-container', 'div', array( 'class' => 'social-bar' ) );
wp_nav_menu( array(
'menu' => 'Social Menu',
'menu_class' => 'uk-subnav',
'container' => 'div',
'container_class' => 'uk-container uk-container-center',
'theme_location' => 'social-menu',
'beans_type' => 'navbar'
) );
echo beans_close_markup( 'social_bar-container', 'div' );
}
}
beans_remove_attribute( 'beans_menu[_navbar][_social-menu]', 'class', 'uk-navbar-nav' );
The position of this menu was originally to the right, and I wanted a search bar on the left side of the screen so that there wasn't so much whitespace above the logo. The best I could do was prepend a search bar to the social menu, which I moved to the left side of the screen, with the following:
beans_add_smart_action( 'beans_menu[_navbar][_social-menu]_prepend_markup', 'myprefix_primary_menu_search' );
function myprefix_primary_menu_search() {
?>
<li class="tm-search uk-large-visible uk-padding-large-right">
<?php get_search_form(); ?>
</li>
<?php
}
As opposed to a menu that takes up an entire row on top of the screen, I would prefer some code that would allow me to add a menu, a search bar, and whatever other components I might want to add in the future on the top of the screen with custom positioning. For now, I just want a search bar on the left, and a menu on the right. Thanks in advance.
If the search bar is to go directly above the logo (I'm assuming this is the site branding logo?), then instead of
beans_add_smart_action( 'beans_menu[_navbar][_social-menu]_prepend_markup', 'myprefix_primary_menu_search' );
couldn't you use
beans_add_smart_action( 'beans_site_branding_prepend_markup', 'myprefix_primary_menu_search' );
Whatever you put there should go directly before the branding logo - some styling should put it nicely in the area above.