Docs

[sgchan]

Hi,
First off let me say I really like the X Theme, especially Cornerstone. I am particularly looking forward to the next version of X Theme because I think it will solve this problem… which is to customise the header.

Could you advice me what is the best way to create a create menu like the attached (desktop & mobile)? Please note, this will be a multi-lingual site.

Looking forward to your reply and many thanks in advance.

[Nico]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

The file you need to update or change in child theme is x/framework/views/global/_navbar.php

Thanks for understanding.

[sgchan]

Hello Nico,
I am delightfully surprise to hear from you so quick. Thanks for the prompt response. I am prepared to develop / customise the menu myself. Could I ask if the mobile menu is also in the same _navbar.php file?

Could I also ask about the theme’s file structure? So far, the closest I’ve found is https://community.theme.co/kb/customization-best-practices/.

Many thanks again.

[Christopher]

Hi there,

We can help you to add button and icons to navbar.
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(); ?>

</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>
 <i class="x-icon-calendar" data-x-icon=""></i>
 <i class="x-icon-globe" data-x-icon=""></i>
 <a class="x-btn x-btn-square x-btn-large" href="#" title="">login</a>
<?php endif; ?>

To change icons, please check this link : http://theme.co/changelog/#theme-4-0-0

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Hope it helps.

[sgchan]

Wow… Thanks Christopher. Really appreciate the code snippet.

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts