Resolved

move the phone number and email address at the top bar

Ultra Theme started by rinoa3108 Mar 18, 2020 9 replies
rinoa3108 Mar 18, 2020 · 6:35 am #14139

Hello,
Is there a way to move the phone number and email address that is on the top bar from the left hand side to the right?

Andrew Misplon Puro Mar 18, 2020 · 7:39 pm #14142

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

rinoa3108 Mar 22, 2020 · 3:19 am #14144

Hi Andrew,
Yes I am a premium member. What to do next?

Andrew Misplon Puro Mar 23, 2020 · 1:17 pm #14146

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

rinoa3108 Mar 24, 2020 · 3:21 am #14148

Hi Andrew,
Yes that is correct.
The top menu page link go on the left and everything else goes on the right.

Andrew Misplon Puro Mar 24, 2020 · 6:26 pm #14149

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;
	}
}
rinoa3108 Mar 24, 2020 · 10:39 pm #14150

Thanks Andrew it worked!!

Andrew Misplon Puro Mar 25, 2020 · 10:12 am #14152

Super, glad that helped.

rinoa3108 Mar 27, 2020 · 1:42 am #14160

Hi Andrew,
Is there a way to have the order of the right side top menu items in this order:
social media / email / phone number?

At the moment it is:
phone / email / social links

Andrew Misplon Puro Mar 27, 2020 · 4:50 pm #14164

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>
10 posts