Docs

[bjgomer13]

I want to have 2 nav menus in my header and I would like to put the 2nd menu in my top bar. It seems like this is not an “out of the box” functionality. Any idea how to do this?

[Rahul]

Hi there,

Thanks for writing in!

This is for the Renew stack. Please give us the stack name or link to your website if the stack differs.

You first need to install a child theme in your website. 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.

You can create your menu by navigating to Appearance > Menus.

http://screencast.com/t/uF4CV9Uq9Ykw

Then to put it in the topbar. Menu name should be Topbar Menu

Create file _topbar.php in wp-content\themes\x-child-renew\framework\views\global
and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display', '' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container-fluid max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?> 
      <?php

        wp_nav_menu( array(
            'menu'           => 'topbar-menu',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu',
            'container'       => 'div',
            'container_class' => 'top-menu',
        ) );
      ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

You can then add this under Custom > CSS in the Customizer.

.top-menu {
      float:left;
}

.top-menu ul {
     margin:0;
}

.top-menu li {
     display:inline-block;
}
.top-menu li a {
    padding:0 20px 0 0;
    line-height:46px;
}

Hope this helps. 🙂

[Author]

Posts