Move the social media icons to the left of a Wordpress nav menu for Soledad child Theme

Question

I've been trying to move some social media icons (class="penci-topbar-social") to the left of a wp_nav_menu element for a bit and am stumped. I tried moving the social media code above the wp_nav_menu array, but that did not work. I'm assuming I have to add something to the functions.php such as an add_filter, but I am not sure where to start. Here is the php for the header, let me know if we I also need to post the functions.php:

<?php
/**
 * Top bar template
 * Options for it in Customize > Top Bar Options & Colors For Top Bar
 *
 * @since 1.0
 */
?>
<div class="penci-top-bar<?php if( get_theme_mod( 
'penci_top_bar_hide_social' ) ): echo ' no-social'; endif; if( get_theme_mod( 'penci_top_bar_enable_menu' ) ): echo ' topbar-menu'; endif; if( get_theme_mod( 'penci_top_bar_full_width' ) ): echo ' topbar-fullwidth'; endif; ?>">
<div class="container">
    <div class="penci-headline" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">

        <?php
        if( get_theme_mod( 'penci_top_bar_enable_menu' ) ):
            /**
             * Display topbar menu
             */
            wp_nav_menu( array(
                'container'      => false,
                'theme_location' => 'topbar-menu',
                'menu_class'     => 'penci-topbar-menu',
                'fallback_cb'    => 'wp_page_menu',
                'walker'         => ''
            ) );
        endif; /* End check if topbar is enable */
        ?>

        <?php if( penci_get_setting( 'penci_top_bar_custom_text' ) && ! get_theme_mod( 'penci_top_bar_enable_menu' ) ) { ?>
            <span class="headline-title"><?php echo penci_get_setting( 'penci_top_bar_custom_text' ); ?></span>
        <?php } ?>

        <?php if( ! get_theme_mod( 'penci_top_bar_hide_social' ) ): ?>
            <div class="penci-topbar-social">
                <?php include( trailingslashit( get_template_directory() ). 'inc/modules/socials.php' ); ?>
            </div>
        <?php endif; ?>



        <?php
        if( ! get_theme_mod( 'penci_top_bar_enable_menu' ) ):
            /**
             * Display headline slider
             */
            $number_posts = get_theme_mod( 'penci_top_bar_posts_per_page' ) ? get_theme_mod( 'penci_top_bar_posts_per_page' ) : 10;
            $topbar_cat = get_theme_mod( 'penci_top_bar_category' );
            $topbar_sort = get_theme_mod( 'penci_top_bar_display_by' );
            $args = array(
                'post_type' => 'post',
                'posts_per_page'    =>  $number_posts
            );

            if( ! get_theme_mod( 'penci_top_bar_tags' ) || get_theme_mod( 'penci_top_bar_filter_by' ) != 'tags' ) {
                if ( $topbar_cat ):
                    $args['cat'] = $topbar_cat;
                endif;
            } elseif ( get_theme_mod( 'penci_top_bar_tags' ) && get_theme_mod( 'penci_top_bar_filter_by' ) == 'tags' ) {
                $list_tag = get_theme_mod( 'penci_top_bar_tags' );
                $list_tag_trim = str_replace( ' ', '', $list_tag );
                $list_tags = explode( ',', $list_tag_trim );
                $args['tax_query'] = array(
                    array(
                        'taxonomy' => 'post_tag',
                        'field'    => 'slug',
                        'terms'    => $list_tags
                    ),
                );
            }

            if( $topbar_sort == 'all' ) {
                $args['meta_key'] = 'penci_post_views_count';
                $args['orderby'] = 'meta_value_num';
                $args['order'] = 'DESC';
            } elseif( $topbar_sort == 'week' ) {
                $args['meta_key'] = 'penci_post_week_views_count';
                $args['orderby'] = 'meta_value_num';
                $args['order'] = 'DESC';
            } elseif( $topbar_sort == 'month' ) {
                $args['meta_key'] = 'penci_post_month_views_count';
                $args['orderby'] = 'meta_value_num';
                $args['order'] = 'DESC';
            }

            $news = new WP_Query( $args );
            if( $news->have_posts() ):
                $auto_play = 'true';
                if( get_theme_mod( 'penci_top_bar_posts_autoplay' ) ): $auto_play = 'false'; endif;
                $auto_time = get_theme_mod( 'penci_top_bar_auto_time' );
                $auto_speed = get_theme_mod( 'penci_top_bar_auto_speed' );
                $auto_time = ( is_numeric( $auto_time ) && $auto_time > 0 ) ? $auto_time : '3000';
                $auto_speed = ( is_numeric( $auto_speed ) && $auto_speed > 0 ) ? $auto_speed : '200';
            ?>
                <div class="penci-owl-carousel penci-owl-carousel-slider penci-headline-posts" data-auto="<?php echo $auto_play; ?>" data-autotime="<?php echo absint( $auto_time ); ?>" data-speed="<?php echo absint( $auto_speed ); ?>">
                    <?php while( $news->have_posts() ): $news->the_post();
                        $title_full = get_the_title();
                    ?>
                        <div>
                            <a class="penci-topbar-post-title" href="<?php the_permalink(); ?>"><?php echo sanitize_text_field( wp_trim_words( get_the_title(), 8, '...' ) ); ?></a>
                        </div>
                    <?php endwhile; wp_reset_postdata(); ?>
                </div>
            <?php endif; /* End check if no posts */?>
        <?php endif; /* End check if topbar menu is enable */?>
    </div>
</div>

And here is an image of the menu I am trying to manipulate

Answer 1

It's hard to say without seeing the actual live page but it may be as simple as adding the following to your theme's style.css file:

.penci-topbar-social {
    float:left;
}

You don't always need to modify where something fires to visually move where it is displayed within the page.