Share on facebook
Share on twitter
Share on linkedin
Share on email

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.

Adding Responsive align option to Elementor Pro Nav Menu Widget 1

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.

Share on facebook
Share on twitter
Share on linkedin
Share on email