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?
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.
Hi Andrew,
Yes I am a premium member. What to do next?
Thanks for confirming. Do you want to move the social icons with the phone number to the right?
Hi Andrew,
Yes that is correct.
The top menu page link go on the left and everything else goes on 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;
}
}
Thanks Andrew it worked!!
Super, glad that helped.
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
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>