Premium WordPress Themes and Support

Home Forums General WordPress horizontal text wrap in menu items

This topic contains 23 replies, has 4 voices, and was last updated by  Bazish 2 years, 1 month ago.

Viewing 9 posts - 16 through 24 (of 24 total)
1 2
  • Author
    Posts
  • #4132

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    One last question: Can you show us a website that does what you want, so we can study the code?

    #4133

    Fred
    Participant
    WP Private
    Post count: 21

    This is not the best example but this is what I am thinking for the menu system.

    http://www.elegantthemes.com/demo/?theme=eStore

    #4134

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    Ok good, I have this theme, I’ll see how they made it work tonight, or in the next following days.

    #4135

    Bazish
    Participant
    WP Major
    Post count: 168

    actually that’s possible with wp walker class… let me show you how i implemented this in tuxedo theme

    #4136

    Bazish
    Participant
    WP Major
    Post count: 168

    ok, check here http://fiverthemes.com/tuxedo/

    you want menu like this?

    #4137

    Fred
    Participant
    WP Private
    Post count: 21

    Yes bazish, that is what I am trying to do. So how did you do that?

    #4138

    Bazish
    Participant
    WP Major
    Post count: 168

    Copy this wp walker class code to your “functions.php” just before the last php closing tag “?>”

    class description_walker 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        ) .'"' : '';
    
               $prepend = '<strong>';
               $append = '</strong>';
               $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
    
               if($depth != 0)
               {
                         $description = $append = $prepend = "";
               }
    
                $item_output = $args->before;
                $item_output .= '<a'. $attributes .'>';
                $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
                $item_output .= $description.$args->link_after;
                $item_output .= '</a>';
                $item_output .= $args->after;
    
                $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
                }
    }

    now we define the walker class, now we need our theme to use this function.. open your themes “nav-menu.php” file and add walker parameter

    'walker' => new description_walker(),

    check attached screenshot of my “nav-menu.php” file. (nav-menu.jpg)

    now go to Appearance > Menu > click on Screen options (check attached file Menus.png”)
    and enable Description. then on your menu, you will see Description box appears.. enter your second line text here (sub text to main text). (already explain on screenshot Menus.png).

    now at this time.. result will be odd if you see the site live.. it’s time for some css hacks..

    in your style.css file, you will find this rule

    ul.ft-hmenu>li>a

    ( replace ft- with your theme CSS Prefix )
    under this rule, you will see your menu item height defined with some px.. like in my case it was “height: 40px;” i changed it to “height: auto;”

    then i added these rules to style.css file

    .ft-menu a{
    min-height: 40px;
    }
    .ft-menu a strong {
    display:block;
    font-size:14px;
    font-weight:normal;
    }
    .ft-menu a span {
    display:block;
    font-size:10px;
    line-height:14px;
    }

    now again replace .ft- with your theme CSS Prefix.
    That’s all…

    Attachments:
    You must be logged in to view attached files.
    #4141

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    That’s awesome Bazish,

    You saved me from a lot of work!

    BTW, I see small problems with the responsive design with this solution… nothing that biggy though unless the customer is really picky.

    #4142

    Bazish
    Participant
    WP Major
    Post count: 168

    Thanks Nick

    yes there will be few.. as i haven’t touched any part of responsive styles… but here focus was how to add description to menu.. you can always style things as per your liking once you got your functionality done.

Viewing 9 posts - 16 through 24 (of 24 total)
1 2

You must be logged in to reply to this topic.