Docs

[toddfmay]

Morning – I have successfully added my main nav and second tier nav menus. Also successfully added my Woo Shop Menu.

Integrity w/Child Theme.

Need a little help in now:

1. Removing the appearance of the second tier main menu from the Woo Shop pages
http://dev-palmspringslife.pantheonsite.io/shop/

This was created based on this post – https://community.theme.co/forums/topic/different-header-for-woocommerce/page/2/#post-710116

2. Make the Second Tier main menu mobile enabled.

I am using in functions.php

// Second Menu
// =============================================================================
register_nav_menus( array(
    'mysubmenu' => __( 'Second Tier', '__x__' )
) );
//add_action('x_after_view_global__nav-primary', 'mysubmenu' );

function my_sub_menu(){
   wp_nav_menu( array(
        'theme_location' => 'mysubmenu',
        'container'      => false,
        'menu_class'     => 'x-nav',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );
}
add_action('x_after_view_global__nav-primary', 'my_sub_menu' );

// =============================================================================
// Sets Custom Menu For Shop 
// =============================================================================

register_nav_menus( array(
  'Shop' => __( 'Shop Menu', '__x__' ),
) );

// Output Primary Navigation with Shop Menu
// =============================================================================

if ( ! function_exists( 'x_output_primary_navigation' ) ) :
  function x_output_primary_navigation() {

    if ( x_is_one_page_navigation() ) {

      wp_nav_menu( array(
        'menu'           => x_get_one_page_navigation_menu(),
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'x-nav x-nav-scrollspy',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

    } elseif ( has_nav_menu( 'primary' ) ) {

      if( x_is_shop() || x_is_product() && has_nav_menu( 'Shop' ) ) {
        wp_nav_menu( array(
          'theme_location' => 'Shop',
          'container'      => false,
          'menu_class'     => 'x-nav',
          'link_before'    => '<span>',
          'link_after'     => '</span>'
        ) );
      } else {
        wp_nav_menu( array(
          'theme_location' => 'primary',
          'container'      => false,
          'menu_class'     => 'x-nav',
          'link_before'    => '<span>',
          'link_after'     => '</span>'
        ) );
      }

    } else {

      echo '<ul class="x-nav"><li><a href="' . home_url( '/' ) . 'wp-admin/nav-menus.php">Assign a Menu</a></li></ul>';

    }

  }
endif;

Thanks- Todd

[toddfmay]

FYI – in Child Theme – -nav-primary.php is:

<?php

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

?>

<a href="#">
  <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>

Thanks – Todd

[Rad]

Hi there,

Thanks for writing in.

1. Hmm, then remove it the way it was added? For example, remove this code

register_nav_menus( array(
  'Shop' => __( 'Shop Menu', '__x__' ),
) );

Then change this code

// Output Primary Navigation
// =============================================================================

if ( ! function_exists( 'x_output_primary_navigation' ) ) :
  function x_output_primary_navigation() {

    if ( x_is_one_page_navigation() ) {

      wp_nav_menu( array(
        'menu'           => x_get_one_page_navigation_menu(),
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'x-nav x-nav-scrollspy',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

    } elseif ( has_nav_menu( 'primary' ) ) {

      if( x_is_shop() || x_is_product() && has_nav_menu( 'Shop' ) ) {
        wp_nav_menu( array(
          'theme_location' => 'Shop',
          'container'      => false,
          'menu_class'     => 'x-nav',
          'link_before'    => '<span>',
          'link_after'     => '</span>'
        ) );
      } else {
        wp_nav_menu( array(
          'theme_location' => 'primary',
          'container'      => false,
          'menu_class'     => 'x-nav',
          'link_before'    => '<span>',
          'link_after'     => '</span>'
        ) );
      }

    } else {

      echo '<ul class="x-nav"><li><a href="' . home_url( '/' ) . 'wp-admin/nav-menus.php">Assign a Menu</a></li></ul>';

    }

  }
endif;

back to the original

// Output Primary Navigation
// =============================================================================

if ( ! function_exists( 'x_output_primary_navigation' ) ) :
  function x_output_primary_navigation() {

    if ( x_is_one_page_navigation() ) {

      wp_nav_menu( array(
        'menu'           => x_get_one_page_navigation_menu(),
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'x-nav x-nav-scrollspy',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

    } elseif ( has_nav_menu( 'primary' ) ) {

        wp_nav_menu( array(
          'theme_location' => 'primary',
          'container'      => false,
          'menu_class'     => 'x-nav',
          'link_before'    => '<span>',
          'link_after'     => '</span>'
        ) );
        

    } else {

      echo '<ul class="x-nav"><li><a href="' . home_url( '/' ) . 'wp-admin/nav-menus.php">Assign a Menu</a></li></ul>';

    }

  }
endif;

Then just start with the fresh code without shop menu, like this,

2. Mobile menu is applied in nav-primary.php

<nav class="x-nav-wrap desktop" role="navigation">....</div>

<nav class="x-nav-wrap mobile" role="navigation">....</div>

As you’ll notice, the only difference is desktop and mobile class. Register your menu the same way X’s menu is registered, and then just wrap it with above element. How did you displayed the second tier menu? It’s not provided from your codes.

Thanks!

[toddfmay]

The second menu is also added in the functions.php file in the sample above:

// Second Menu
// =============================================================================
register_nav_menus( array(
    'mysubmenu' => __( 'Second Tier', '__x__' )
) );
//add_action('x_after_view_global__nav-primary', 'mysubmenu' );

function my_sub_menu(){
   wp_nav_menu( array(
        'theme_location' => 'mysubmenu',
        'container'      => false,
        'menu_class'     => 'x-nav',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );
}
add_action('x_after_view_global__nav-primary', 'my_sub_menu' );

Thanks- Todd

[toddfmay]

Second Tier Menu is also in Customizer as this:

/*Second Tier Menu settings */
ul#menu-second-tier {
display: table;
margin-left: auto;
margin-right: auto;
}

ul#menu-second-tier li {
float: left;
}

ul#menu-second-tier li a {
padding-left: 10px;
padding-right: 10px;
}

[toddfmay]

You lost me at this line.. Then just start with the fresh code without shop menu, like this, was there something that was to follow?

Thanks- Todd

[Paul R]

Hi Todd,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[toddfmay]

Ok – I’d like the Second tier menu to be mobile responsive and also not appear on the shop pages.

Shop Page where second tier menu appears – http://dev-palmspringslife.pantheonsite.io/shop/

Home Page where second tier appears, but need to be mobile and formatted as Main Nav menu – http://dev-palmspringslife.pantheonsite.io/

Thanks- Todd

[Rad]

Hi Todd,

About this, Then just start with the fresh code without shop menu, like this. It’s the code above it, it’s the fresh one or the original copy without the code of the Shop menu. Sorry for the placement of the description.

And thanks for providing the code, please update it to this,

// Second Menu
// =============================================================================
register_nav_menus( array(
    'mysubmenu' => __( 'Second Tier', '__x__' )
) );
//add_action('x_after_view_global__nav-primary', 'mysubmenu' );

function my_sub_menu(){
   
   echo '<nav class="x-nav-wrap desktop" role="navigation">';

   wp_nav_menu( array(
        'theme_location' => 'mysubmenu',
        'container'      => false,
        'menu_class'     => 'x-nav',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

   echo '</nav>

<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile.second-menu">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden">Navigation</span>
</a>

   <nav class="x-nav-wrap mobile second-menu" role="navigation">';

   wp_nav_menu( array(
        'theme_location' => 'mysubmenu',
        'container'      => false,
        'menu_class'     => 'x-nav',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

   echo '</nav>';
}

add_action('x_after_view_global__nav-primary', 'my_sub_menu' );

Thanks!

[toddfmay]

Great thanks- that resolved the second tier issues. I removed all the Shop menu entries other than registering it.

// =============================================================================
// Sets Custom Menu For Shop
// =============================================================================

register_nav_menus( array(
‘Shop’ => __( ‘Shop Menu’, ‘__x__’ ),
) );

Do now how do I get my shop menu back on the shopping cart? While not showing the Primary and Second Tier menu.

http://dev-palmspringslife.pantheonsite.io/shop/

Thanks- Todd

[Rad]

Hi there,

I thought we’re removing the added shop menu. Is it okay if we finalize and clear it a bit?

Basically, you want the shop menu on cart page but not on other pages? And you wish to exclude your first and second tier menu from cart page? Does it mean that there are 3 menus? The second tier is not a shop menu, right?

Thanks!

[toddfmay]

Basically, you want the shop menu on cart page but not on other pages? YES

And you wish to exclude your first and second tier menu from cart page? YES

Does it mean that there are 3 menus? YES

The second tier is not a shop menu, right? Correct

Thanks- Todd

[Mihai]

Hi there,

I’m interested in adding a second tier menu as well, but without the whole “show and hide on different pages” requirements that Todd has.
Could you give a start to finish, step by step explainer for anyone who wants to simply add that second menu for Integrity?

[Christian]

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. Thanks for understanding. Take care!

[toddfmay]

Christian – you responding to my ticket or mihaicode’s request?

Thanks- Todd

[Author]

Posts