Docs

[mmee123]

Hi,

My site is http://www.thecoachingdiva.org – I would love for the instagram icon (and eventually other social icons) to appear inline with the menu options rather than creating another line.

Can you please tell me how to do this? Ideally to the right of “Testimonials”.

Also, when I hover over the icon, the background goes blue – can you tell me how to make it go black?

Thanks

[Christopher]

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.

Copy _nav-primary.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>
 
<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
        <div class="navbar-social"><?php x_social_global(); ?></div>

</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
               <div class="navbar-social"><?php x_social_global(); ?></div>

</div>

<?php endif; ?>

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

.x-social-global a:hover.instagram {
    background-color: #000;
    color: #fff;
}
.navbar-social{
float:left;
}
.navbar-social a{
font-size:25px;
margin:5px;
}

Hope it helps.

[Author]

Posts