Docs

[piexec]

I am currently using the attached topbar.php code to replace the text to the left with a menu. How could I append this file to also replace the Social Media Icons to the right with “Your Text Here”

[piexec]

<?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-fluid 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

wp_nav_menu( array(
‘menu’ => ‘topbar-menu’,
‘container’ => false,
‘menu_class’ => ‘x-nav sf-menu’,
‘container’ => ‘div’,
‘container_class’ => ‘top-menu’,
) );
?>
<?php x_social_global(); ?>
</div>
</div>

<?php endif; ?>

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[piexec]

piexec.com

[Zeshan]

Hi there,

Thanks for the URL!

Do you want to replace your topbar social icons with some text (see: http://prntscr.com/ara131)? If so, replace your current _topbar.php file code with following:

<?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-fluid max width">
      <?php

        wp_nav_menu( array(
            'menu'           => 'topbar-menu',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu',
            'container'       => 'div',
            'container_class' => 'top-menu',
        ) );
      ?>
      <?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(); ?>
    </div>
  </div>

<?php endif; ?>

And then add following CSS code under Custom > CSS in the Customizer:

.x-topbar .p-info {
  float: right;
}

After that, you can insert your text under Header > Miscellaneous > Topbar Content in the Customizer.

Thank you!

[piexec]

Thanks a million! Your support makes this theme totally worth it!

[piexec]

Looks great on desktop… Not so great on mobile. See attached.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width: 767px){
.x-topbar .p-info {
    background-color: transparent;
    float: none !important;
}
}

Hope it helps.

[Author]

Posts