Docs

[TheCreativeCompany]

Hello,

http://cedarlakemin.wpengine.com/
Integrity stack

I’d like to figure out the best way to break up the top bar into 3 columns like this:

Column 1: social
Column 2: Logo
Column 3: CTA button

I’ve tested with a couple of the solutions from the forum but have not provided a solid path forward. I also like to better understand if there are guidelines as to when a developer is supposed to work via the child theme in admin, use custom CSS, customize a template, or do a combination.

Thanks,
cah

[Friech]

Hi Cah,

Thanks for writing in! On your child theme please navigate to \x-child\framework\views\global\ directory. There create a file named _topbar.php and paste the code below on it.

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

    <!-- first column social icons -->
    <div class="x-column x-sm x-1-3">
    	<?php x_social_global(); ?>
    </div>

    <!-- second column logo -->
    <div class="x-column x-sm x-1-3">
    	<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      	<p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
     	<?php endif; ?>
    </div>

    <!-- third column button -->
    <div class="x-column x-sm cs-ta-center x-1-3">
    	<a class="x-btn x-btn-global" href="#" data-options="thumbnail: ''">Click Me!</a>
    </div>
      
    </div>
  </div>

<?php endif; ?>

Look for this line:

<a class="x-btn x-btn-global" href="#" data-options="thumbnail: ''">Click Me!</a>

That is the code for button, replace the # with the URL on where do you want to link the button, and the Click Me! as the button label.

Lastly add this on your custom CSS on Customizer to push the social icons on the left side.

.x-topbar .x-social-global {
    float: left;
}

Hope it helps, Cheers!

[Author]

Posts