Docs

[jdfrizzell]

I want to take the social icons currently in the footer and move them into the side-positioned header on this site:
http://chandlerbooth.com/

Please help! Thanks.

[Thai]

Hi There,

Because this requires a template change, I’d advise that you setup 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.
Then navigate to your child theme’s /framework/views/integrity directory create a file named _navbar.php and paste the code below:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <?php x_social_global(); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

After that add the following CSS under Customizer > Custom > Global CSS:

.x-social-global {
    text-align: center;
}
.x-social-global a {
    margin-right: 10px;
    font-size: 28px;
}

Hope it helps 🙂

[jdfrizzell]

Hi!

Thanks for the help!

However, it doesn’t seem to have worked correctly. The icons are in the middle of the main area of the home page, not in the header.

[Christopher]

Hi there,

Please provide us with FTP credentials in private replay.

Thanks.

[jdfrizzell]

This reply has been marked as private.

[Christopher]

Hi there,

Sorry for the confusion, the file should be under /framework/views/Global, I went ahead and moved it to global folder but still can’t see the changes. If you have cache plugin please clear cache and check again.

In regards with icons in top of page, they are displaying in footer area but since you don’t have any content in this page, footer displays on top of page.

Hope it helps.

[Author]

Posts