[Resolved] move the phone number and email address at the top bar

Hi, unfortunately, not without Custom CSS changes. It’s definitely something I can lend a hand with within our premium support scope.

Thanks for confirming. Do you want to move the social icons with the phone number to the right?

Thanks, you can try the following:

#top-bar .container {
	display: flex;
	flex-direction: row-reverse;
}

#top-bar .top-bar-text {
	text-align: right;
}

.top-bar-navigation {
	text-align: left;
}

@media (max-width: 1024px) {
	#top-bar .container {
		flex-direction: column-reverse;
	}
	#top-bar .top-bar-text,
	.top-bar-navigation {
		text-align: center;
	}
}

Super, glad that helped.

The following can be inserted in your child theme functions.php file or Code Snippets plugin to change the phone/email order:

if ( ! function_exists( 'ultra_top_bar_text_area' ) ):
/**
 * Display the top bar text.
 */
function ultra_top_bar_text_area() {
	$phone = wp_kses_post( siteorigin_setting( 'text_phone' ) );
	$email = wp_kses_post( siteorigin_setting( 'text_email' ) );

	if ( siteorigin_setting( 'text_email' ) ) {
		echo '<span class="email"><a href="mailto:' . $email . '">' . $email . '</a></span>';
	}
	if ( siteorigin_setting( 'text_phone' ) ) {
		echo '<span class="phone"><a href="tel:' . $phone . '">' . $phone . '</a></span>';
	}
}
add_action( 'ultra_top_bar_text', 'ultra_top_bar_text_area' );
endif;

To move the social menu in front of the text you can create a folder in your child theme called “parts” and then create a new file within that folder called “top-bar.php” and insert the following into that file:

<?php
/**
 * Part Name: Top Bar.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 * 
 * @package ultra
 * @since ultra 1.0.2
 * @license GPL 2.0
 */
?>

<div id="top-bar">
	<div class="container">
		<div class="top-bar-text"><?php wp_nav_menu( array( 'theme_location' => 'top-bar-social', 'container_class' => 'top-bar-menu', 'depth' => 1, 'fallback_cb' => '' ) ); ?><?php do_action( 'ultra_top_bar_text' ); ?></div><?php if ( siteorigin_setting( 'navigation_top_bar_menu' ) ) { ?><nav class="top-bar-navigation"><?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?></nav><!-- .top-bar-navigation -->
		<?php } ?>
	</div><!-- .container -->
</div><!-- #top-bar -->
<span class="top-bar-arrow" style="display: none;"></span>