Docs

[jasonribeiro]

Hi, I’m looking at Appearance > Menus > Manage Locations and I see that it says “Your theme supports 2 menus.”, which are the “Primary Menu” and the “Footer Menu”. I was wondering if there was a way to add an additional menu location to the “Topbar” that you can turn on and off under Appearance > Customize > Header > Miscellaneous. This would be useful for those who want to include an additional menu across the top of the page for account info, support, etc. Please let me know if this is possible. Thanks!

[Jade]

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.

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

[jasonribeiro]

yes, that helped. Thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts