- This topic has 9 replies, 2 voices, and was last updated 4 years, 6 months ago by Andrew Misplon.
Tagged: email move phone number Top Bar
- AuthorPosts
- March 18, 2020 at 6:35 am #14139
rinoa3108ParticipantHello,
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?March 18, 2020 at 7:39 pm #14142
Andrew MisplonKeymasterHi, unfortunately, not without Custom CSS changes. It’s definitely something I can lend a hand with within our premium support scope.
March 22, 2020 at 3:19 am #14144
rinoa3108ParticipantHi Andrew,
Yes I am a premium member. What to do next?March 23, 2020 at 1:17 pm #14146
Andrew MisplonKeymasterThanks for confirming. Do you want to move the social icons with the phone number to the right?
March 24, 2020 at 3:21 am #14148
rinoa3108ParticipantHi Andrew,
Yes that is correct.
The top menu page link go on the left and everything else goes on the right.March 24, 2020 at 6:26 pm #14149
Andrew MisplonKeymasterThanks, 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; } }
March 24, 2020 at 10:39 pm #14150
rinoa3108ParticipantThanks Andrew it worked!!
March 25, 2020 at 10:12 am #14152
Andrew MisplonKeymasterSuper, glad that helped.
March 27, 2020 at 1:42 am #14160
rinoa3108ParticipantHi 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 linksMarch 27, 2020 at 4:50 pm #14164
Andrew MisplonKeymasterThe 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>
- AuthorPosts
You must be logged in to reply to this topic.