[condor11Participant]

Hi all,

I need to add another menu/nav bar directly above the main menu as per the image below, I have read
some old posts on the topic but was wondering if anyone can help with an upto date solution.

Cheers!

[ThaiModerator]

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/global directory create a file named _nav-primary.php and paste the code below:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================

?>

<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 id="second_navbar" class="x-nav-wrap desktop" role="navigation">
  <?php
      wp_nav_menu( array(
        'theme_location' => 'second_primary',
        'container'      => false,
        'menu_class'     => 'x-nav',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );
  ?>
</nav>

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

After that add the following code to functions.php file locates in your child theme:

register_nav_menu( 'second_primary', 'Second Navbar' );

Let us know how it goes!

[condor11Participant]

Hey Thai,

Thank you so much! Thats worked perfectly.

Could you show me an example of the CSS for the appearance and the best way to do it:)

Cheers!

[RadModerator]

Hi there,

Currently, the CSS is only applicable for menus builtin to X theme. Custom menu by default has no CSS, and it depends on what styling you wish to achieve.

It’s quite big to discuss and we don’t provide such tutorial. But should be common for all theme. It’s best to consult it to a developer that can better help you with design.

Thanks for understanding.

[condor11Participant]

This reply has been marked as private.

[Rue NelModerator]

Hey Alex,

I would recommend that you join in the Facebook community, https://www.facebook.com/groups/xthemeusers/. You can post in the community and maybe someone from there could help you.

Hope this helps.

[Author]

Posts