Docs

[eimkeith]

Hello again,

on my site zuffenhaus.jkeithwalters.com I am having issues aligning and spacing the social and LOGIN on the topbar.

I’d like to align to the right in the following order (left to right): LOG IN, social icons – with comfortable space between them and similar vertical alignments. I’d also like to tone down the social icons (darker) so as not to override the LOGIN text in the topbar.

I also think I may not have added the BBB logo properly – it is currently clickable, and overly tall compared to the social icons. :/

Ideas?

[Rue Nel]

Hello There,

Thanks for writing in!

Please update your _topbar.php. The Social icons will display first before your menu. You may need to have this code:

<?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' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>

      <?php // this is where you addd your menu here ?>

    </div>
  </div>

<?php endif; ?>

And to change the color of the icons to something that will make it appear on top on the black background, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-topbar .x-social-global a {
    color: red;
}

Hope this helps.

[eimkeith]

Thanks for that; just reviewing your code suggestion enabled me to rearrange the order of the social icons and the login.

Should my BBB logo be included in the php file also? If not, how do I use HTML to make it align right but not overlap/interfere with the LOGIN/Social icons?

TIA!

[Rupok]

Hi there,

Thanks for updating. To align the logo to right, you can use this CSS :

.x-topbar .p-info {
  position: absolute;
  right: 160px;
  top: 0;
}

Let’s change the values if needed.

Hope this helps.

Cheers!

[Author]

Posts