Docs

[smsfthinker]

Hello there,

Can you please tell me what CSS code to add so that my social media icons are inline and to the right of my NavBar menu items?

Here at http://blogwithconfidence.com/

Kind regards,
Helen

[Christopher]

Hi there,

Please move your customization from _navbar.php file to _nav-primary.php file.

You should put the code after following line of code :

<?php x_output_primary_navigation(); ?>

Your file would be like this :

<?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(); ?>
      <?php x_social_global(); ?>

</nav>

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

</div>

<?php endif; ?>

Hope it helps.

[smsfthinker]

Hi Christopher,

I’m sorry but you’ve lost me with this instruction.

Regards,
Helen

[Rupok]

Hi Helen,

It seems explained well already. Did you follow the instructions? Where you are exactly facing the problem?

[smsfthinker]

Hi Rupok,

1. So I need to create a new file named _nav-primary.php

2. I don’t understand the instruction

“You should put the code after following line of code :

<?php x_output_primary_navigation(); ?>”

What code do I put after that line of code?

3. Do I need to do anything to _navbar.php file? Christopher mentions moving the customisation from here. But I don’t know what customisation he’s talking about?

4. I think it may be best to just tell me the final code that should be in the _navbar.php file, and the final code that should be _nav-primary.php, because I’m confused about moving codes and which codes to move??

Kind regards,
Helen

[Friech]

Hi Helen,

Sorry for not being clear. I’m not sure how did you able to place the social icon below the menu, but it was actually outside of the navigation bar so its kind of tricky to place it next to your menu with just CSS (its kind of an issue).

So we need to address that first, so remove the code you use to add that social icons under the menu. And do this instead:

On your child theme navigate to this directory: \x-child\framework\views\global\, there create a file named _nav-primary.php and paste the code below on it.

<?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_social_global(); ?>
  <?php x_output_primary_navigation(); ?> 
</nav>

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

<?php endif; ?>

This should output the social icons next to the logo, now to inline this social icons to your menu. Add this custom CSS on your Customizer

.x-nav-wrap .x-social-global {
	float: right;
	margin-top: 24px;
}
.x-nav-wrap .x-social-global a {
	padding-left: 8px;
	padding-right: 8px;
}

Feel free to adjust those values where you see it fits.

Hope it helps, Cheers!

[smsfthinker]

Thanks Friech,

Can you please help me remove the social media icons which you say are outside the navigation bar?

I’m not sure how they got there. Could it have something to do with functions.php code? I definitely followed some instructions from your forum but I’m not sure which one?

Regards,
Helen

[smsfthinker]

Don’t worry Friech,

I’ve managed to work it out.

Is there any way I can make the navbar social media icons bigger?

Thanks for your help.

Helen

[Lely]

Hi Helen.

Glad you were able to work it out.
To adjust the icons size, please use the following CSS:

.x-nav-wrap .x-social-global a i {
     font-size: 24px;
}

Adjust the size accordingly.

[smsfthinker]

Thanks Lely

[Friech]

You’re welcome, glad we could help.

Cheers!

[Author]

Posts