Add line break for menu items

Question

I have some items in my menu that I would like to be set on two lines.

For example I have these items : Home - Get in touch - Contact us

For the item "Get in touch" i would like the "in touch" to be on a second line. I would also like the second line to be smaller.

I tried this directly on the menu label :

Get <br> <small> in touch </small>

But only "small" is working, not the break line...

Edit: Following the recommandations I get theses errors :

Fatal error: Uncaught Error: Call to a member function get_page_permastruct() on null in /XXXXX/wp-includes/link-template.php:435 Stack trace: #0 /XXXXX/wp-includes/link-template.php(397): _get_page_link(Object(WP_Post), false, false) 
#1 /XXXXX/wp-includes/link-template.php(197): get_page_link(Object(WP_Post), false, false) 
#2 /XXXXX/wp-includes/nav-menu.php(878): get_permalink(Object(WP_Post)) 
#3 [internal function]: wp_setup_nav_menu_item(Object(WP_Post)) 
#4 /XXXXX/wp-includes/nav-menu.php(732): array_map('wp_setup_nav_me...', Array) 
#5 /XXXXX/wp-includes/nav-menu-template.php(151): wp_get_nav_menu_items(Object(WP_Term), Array) 
#6 /XXXXX/wp-content/plugins/code-snippets/php/snippet-ops.php(582) : eval()'d code(3): wp_nav_menu(Object(stdClass)) 
#7 /XXXXX/wp-content/plugins/code-snippets/php/sn in /XXXXX/wp-includes/link-template.php on line 435

Answer 1

Well I found a solution.

I need to use like this:

<span>Get<br><small>in touch</small></span>

Now all is good!

Answer 2

In WordPress, line breaks are generally not supported in menu item labels through the standard menu editor. However, you can achieve a similar result using a custom walker class.

Here's a step-by-step guide:

Create a Custom Walker Class: Add the following code to your theme's functions.php file or in your custom plugin file to create a custom walker class.

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = null) {
        $classes = empty($item->classes) ? array() : (array) $item->classes;

        $output .= "<li id='menu-item-$item->ID' ";
        $output .= implode(' ', $classes);
        $output .= '>';

        $output .= '<a href="' . esc_url($item->url) . '">';

        // Check if the menu item label contains a line break tag
        if (strpos($item->title, '<br>') !== false) {
            $output .= $item->title;
        } else {
            $output .= esc_html($item->title);
        }

        $output .= '</a>';
    }
}

Modify the Menu Output: Update your wp_nav_menu function call in your theme file to use the custom walker.

wp_nav_menu(array(
    'theme_location' => 'your_menu_location',
    'walker' => new Custom_Walker_Nav_Menu(),
));

Add Line Breaks in Menu Items: Now, you can use line breaks in your menu item labels in the WordPress menu editor. For example:

Get<br><small>in touch</small>

Make sure to replace 'your_menu_location' with the actual theme location of your menu.

Remember to test this thoroughly, as custom walkers can have different behaviors depending on the theme and other factors. If this doesn't work as expected, you may need to further customize the walker based on your theme's structure.