Adding Responsive align option to Elementor Pro Nav Menu Widget

By default, Nav Menu widget of Elementor Pro has nav menu items align option that can’t be set individually to the tablet and mobile views.

Here is the solution:

<?php 
// Some Other Codes
add_action('elementor/element/nav-menu/section_layout/before_section_end', function ($instance, $args) {

    $instance->add_responsive_control(
        'responsive_align_vertical',
        [
            'label'     => __('Alignment', 'elementor'),
            'type'      => \Elementor\Controls_Manager::CHOOSE,
            'options'   => [
                'flex-start'   => [
                    'title' => __('Left', 'elementor'),
                    'icon'  => 'fa fa-align-left',
                ],
                'center' => [
                    'title' => __('Center', 'elementor'),
                    'icon'  => 'fa fa-align-center',
                ],
                'flex-end'  => [
                    'title' => __('Right', 'elementor'),
                    'icon'  => 'fa fa-align-right',
                ],
            ],
            'condition' => [
                'layout' => 'vertical',
            ],
            'selectors' => [
                '{{WRAPPER}} .elementor-nav-menu a' => 'justify-content:{{VALUE}};',
            ],
        ]
    );
    $instance->add_responsive_control(
        'responsive_align_horizontal',
        [
            'label'     => __('Alignment', 'elementor'),
            'type'      => \Elementor\Controls_Manager::CHOOSE,
            'options'   => [
                'flex-start'   => [
                    'title' => __('Left', 'elementor'),
                    'icon'  => 'fa fa-align-left',
                ],
                'center' => [
                    'title' => __('Center', 'elementor'),
                    'icon'  => 'fa fa-align-center',
                ],
                'flex-end'  => [
                    'title' => __('Right', 'elementor'),
                    'icon'  => 'fa fa-align-right',
                ],
            ],
            'condition' => [
                'layout' => 'horizontal',
            ],
            'selectors' => [
                '{{WRAPPER}} .elementor-nav-menu__container' => 'justify-content:{{VALUE}};',
            ],
        ]
    );
}, 99, 2);
?>

Add the above code somewhere in your functions.php file or somewhere appropriate.