Docs

[mergyte]

Hi there,

I followed this forum to create a custom menu for the Top Bar: https://community.theme.co/forums/topic/menu-in-top-bar/

I created 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 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; ?>

I 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;
}

Everything works great however it’s missing a component which is to show the “active” page differently. I’d like to show the current page as text color blue. Any assistance is appreciated.

Thanks 🙂

[Rue Nel]

Hello There,

Thanks for writing in! To show the current page as text color blue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.top-menu li.current-menu-item a,
.top-menu li.current_page_parent a, {
    color: blue !important
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts