[jptsetmeParticipant]

Hi!

I used a bunch of examples I found here in the forum to cobble together the topbar look that we wanted, but it looks poor on mobile. My understanding is that the next version of X will be much better at header widgets, etc., but for now I think I can get by with a short fix. Hoping you can suggest some update that will force it to do a line break between the columns when rendered on a very small device. Attaching two screenshots, one with it looking fine on a wider device, and one where there’s no room at all between the two columns and it looks bad. Below is the code I have for the topbar now. (I used font awesome unicode strings to get the icons I wanted for the calendar and newsletter but they aren’t pasting well in the code — no issue with the icons, though.)

<a href="https://www.google.com/maps/place/6710+Perry+Creek+Rd,+Raleigh,+NC+27616/@35.8648021,-78.5543919,14z/data=!4m5!3m4!1s0x89ac5a42085feabf:0xe93851fb90cfefa2!8m2!3d35.8647978!4d-78.5368824" class="x-column x-sm x-1-3">Join us on Sundays at 10:30am at River Bend Elementary</a>

<span class="x-column x-sm x-2-3 right-text">
<i class=”x-icon x-icon-calendar” data-x-icon= aria-hidden=”true”></i> <a href="http://perrycreekchurch.org/events/">Calendar </a> 
<i class=”x-icon x-icon-book” data-x-icon= aria-hidden=”true”></i> <a href="http://us1.campaign-archive2.com/?u=a5b3c3450c102c5d0d959510e&id=0482b33799&e=" target="_blank">Newsletter</a></span>

Thanks for your help!
–Joe

[ThaiModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[jptsetmeParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello Joe,

Thanks for updating in and for providing the information. Please keep in mind that the Topbar content is only limited to simple text. Doing complex layout with it will need custom development. What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>

      <div class="custom-topbar x-container">

      	<div class="x-column x-sm x-1-2">
      		<p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      	</div>

      	<div class="x-column x-sm x-2-3 right-text">
      		<p class="p-info">
      			<?php echo do_shortcode('[x_icon type="calendar"]'); ?> <a href="http://perrycreekchurch.org/events/">Calendar </a> 
				<?php echo do_shortcode('[x_icon type="book"]'); ?> <a href="http://us1.campaign-archive2.com/?u=a5b3c3450c102c5d0d959510e&id=0482b33799&e=" target="_blank">Newsletter</a>
			</p>
      	</div>

      <?php endif; ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

3] Save the file named as _topbar.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

We would loved to know if this has work for you. Thank you.

[Author]

Posts