Top row with social menu on the left and search on the right


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.

Write a reply

Login or register to write a reply, it's free!