How to display dual language menus and headers?

One option could be to use menu descriptions (option found in Menus Screen Options, if not enabled yet) and a custom menu walker to display extra text before/after menu items in similar fashion as in the reference site you mentioned. This way you could add the translated string to the menu description field.

WPBeginner has posted an example how to display menu description with a custom walker. For future reference here’s the code. I modified the example so that the description is before the menu item text.

// This goes into your child theme functions.php
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 .= '<span class="sub">' . $item->description . '</span><br>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

As you’re using Twenty Seventeen you need to copy components/navigation/navigation-top.php file to similar path in your child theme.

Then add the custom walker to the menu. Like so,

<?php
/**
 * Displays top navigation with custom walker
 */
?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php _e( 'Top Menu', 'twentyseventeen' ); ?>">
    <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><?php echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) ); echo twentyseventeen_get_svg( array( 'icon' => 'close' ) ); _e( 'Menu', 'twentyseventeen' ); ?></button>
    <?php 
    $walker = new Menu_With_Description;
    wp_nav_menu( array(
        'theme_location' => 'top',
        'menu_id'        => 'top-menu',
        'walker'        => $walker, // Add custom walker to the menu
    ) ); ?>

    <?php if ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) : ?>
        <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'next' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll Down', 'twentyseventeen' ); ?></span></a>
    <?php endif; ?>
</nav><!-- #site-navigation -->

Then add the necessary styling to your child themes styles.css.