Hi I have a litle request, I used another theme before which allowed me to have a description under the menu titles. I would like to know how I could do this with Vantage theme.
Basically if I have HOME I would like to have Ana Sayfa under it for my Turkish community, really did not want to install a multilingual plugin for simple things like this. Any CSS code I can add?
Or is there a way to enable Menu Description?
Thanks
Tom
Hi Tom
Unfortunately, this isn’t possible in Vantage without some custom coding. I’ve marked this thread as a feature request. We often look through these threads to get ideas for what to add in our future updates. Hopefully, we’ll be able to add this in a future update.
If you need this urgently, you could always post a job on https://codeable.io/.
Sorry we don’t have more for you at the moment. We’re working hard to improve Vantage and fill in all the little feature gaps.
Hi Tom,
Yes there is a way to enable Menu Description but this may require a little HTML and CSS knowledge.
1. Go to Appearance> Menus and at the top right of the screen click on Screen Options and check the checkbox for Descriptions. Add description field will now appear when editing the menu items, so type in the descriptions such as Ana Sayfa and save the menu.
2. Then go to Appearance> Editor and go to edit the file Theme Functions (functions.php) and paste the following code at the bottom of the file:
class Menu_With_Description extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"'; $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= ' <span class="sub">' . $item->description . '</span>'; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }Then save the file.
3. Finally go to edit the file menu.php which is listed after the files masthead.php and menu-empty.php (I said this because you might see 2 menu.php) and replace the code in the file with the following code:
<?php /** * Part Name: Default Menu */ ?> <nav role="navigation" class="site-navigation main-navigation primary <?php if( siteorigin_setting('navigation_use_sticky_menu') ) echo 'use-sticky-menu' ?>"> <div class="full-container"> <?php if( siteorigin_setting('navigation_menu_search') ) : ?> <div id="search-icon"> <div id="search-icon-icon"><div class="vantage-icon-search"></div></div> <form method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search"> <input type="text" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" /> </form> </div> <?php endif; ?> <?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'link_before' => '<span class="icon"></span>', 'walker' => $walker ) ); ?> </div> </nav><!-- .site-navigation .main-navigation -->Please try and let me know.
Cheers!