Docs

[Tim]

Hi X,

By default, the navbar menu items does not show the menu descriptions. What is the easiest way to turn this on?

See attached screenshot to clarify.

[Christopher]

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.

Please add following code in child theme’s functions.php file :

class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array|object $args    Additional strings. Actually always an 
                                     instance of stdClass. But this is WordPress.
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';

        $output .= "<li id='menu-item-$item->ID' $class_names>";

        $attributes  = '';

        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';

        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? '<small class="nav_desc">' . esc_attr( $item->description ) . '</small>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $description
            . $args->after;

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}
// 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>',
        'walker'          => new Description_Walker
      ) );

    } else {

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

    }

  }
endif;

Hope it helps.

[Tim]

Hi Christopher,

This works great. I have added some styling and it looks superb! Only thing left: how do i get the items to align correctly beneath the top items?

Home

I have tried some margin, but that does not do the trick. Maybe I oversee the correct css rule..

Thanks so much:)

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar .desktop .x-nav > li ul {
    top: 100px;
}

Hope it helps 🙂

[Tim]

Hi Thai,

The height is ok. I ment the horizontal alignment..

Thanks

[Christopher]

Hi there,

Please add following CSS in customizer:

.nav_desc {
    font-style: italic;
    font-size: small;
    color: #fff;
    text-align: center;
    display: inherit;
}

Hope it helps.

[Tim]

Hi Christopher,

This almost works. But I would like to have the description to be aligned with the top item like in the provided screenshot. Not it is in the center of the top item..

Thanks

[Thai]

Hi There,

Please update the previous CSS a bit:

.nav_desc {
    font-style: italic;
    font-size: small;
    color: #fff;
    text-align: left;
    display: inherit;
    padding: 0 20px;
}

Hope it helps 🙂

[Tim]

You are the best! But what about the submenu’s (i only see it now) they always intent that there are submenu items, while this is not always the case haha..

Cheers!

[Tim]

Before i forget: is it possible to get the hover effect just like in the example?

https://www.capegroep.nl/klanten/

So everything orange on hover with a border. The active one has a background color.

Cheers!

[Paul R]

Hi Tim,

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

.x-navbar .desktop .x-nav li:not(.menu-item-has-children)>a>span:after {
    display:none;
}

Hope that helps.

[Tim]

Hi Paul,

That works great, thanks! I think you did not see my other post above?

Cheers!

[Rupok]

Hi there,

Thanks for writing back. It seems you have posted while Paul was replying. Let me try to assist you on this. It would be tricky and will require a bit more code. Let’s try this CSS :

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  height: auto;
  line-height: 1;
  padding: 10px 20px;
}

.x-navbar .desktop .x-nav > li {
  border: 1px solid transparent;
  border-radius: 5px;
  margin: 15px 10px 0;
}

.x-navbar .desktop .x-nav > li:hover {
  border: 1px solid #ff671b;
}

.x-navbar .desktop .x-nav > li:hover a, .x-navbar .desktop .x-nav > li:hover .nav_desc {
  color: #ff671b;
}

.x-navbar .desktop .x-nav > li.current-menu-item {
  background-color: #ff671b;
}

.x-navbar .desktop .x-nav > li.current-menu-item > a, .x-navbar .desktop .x-nav > li.current-menu-item .nav_desc {
  color: #fff;
}

.x-navbar .desktop .x-nav > li ul {
  top: 65px;
}

Hope this helps. Kindly adjust the values if needed.

Cheers!

[Tim]

Hi Rupok,

Thanks for this awesome support. Main reason to support Themeco for me:)

It is almost perfect, but upon scroll the font color stays white and is therefor barely readable.

I have this css code to make it grey and orange on hover:

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a > span {
    color: #848484;

}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a > span:hover  {
    color: #ff671b;

}

This ofcourse is not right because the background is orange. Also the grey is not that nice as the white on the orange background. So my last question is: is there another simple way to tackle this?

Thanks!

[Christopher]

Hi there,

Update your code to :

.x-navbar .desktop .x-nav > li:hover > a, .x-navbar .desktop .x-nav > li:hover .nav_desc {
    color: #ff671b;
}

Please add following codes too:

.x-navbar.x-navbar-fixed-top .nav_desc {
    color: red;
}
.x-navbar .desktop .sub-menu a {
    color: #b7b7b7;
}

Hope it helps.

Hope it helps.

[Author]

Posts