Elementor Nav Menu Addon

A simple plugin to extend your Elementor Pro Nav Menu.

Addon Controls

By default, Elementor comes with preset options for configuring the Elementor Pro Navigation Module. The following controls have been added to help extend the usefulness of the module on sites built using Elementor.

• Parent Menu Border Width
• Parent Menu Border Color
• Child Menu Text Color
• Child Menu Text Color on Hover
• Child Menu Background Color
• Child Menu Background Color on Hover
• Menu FullScreen Option (Yes/No)
• CTA 1 Button Text
• CTA 1 Button Link
• CTA 1 Button Text Color
• CTA 1 Button Text Color on Hover
• CTA 1 Button Background Color
• CTA 1 Button Background Color on Hover
• CTA 2 Button Text
• CTA 2 Button Link
• CTA 2 Button Text Color
• CTA 2 Button Text Color on Hover
• CTA 2 Button Background Color
• CTA 2 Button Background Color on Hover

Extensions

You can extend the addon functionality further by adding in your own controls and specifying the selectors responsible for re-rendering on the preview mode. Use the register_controls method for this. For e.g.

public function register_controls( $element, $args ) {
        $element->add_control(
            'myColor',
            [
                'label' => __( 'My Color', 'hip' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} myCSS Selector' => 'color: {{VALUE}}',
                ],
            ]
        );
 }

Development

This repository includes a WordPress development environment based on Docker that can be run on your computer or inside a Vagrant and VirtualBox wrapper for network isolation and simple .local domain names.

1. Clone the plugin repository.

2. Setup the development environment and tools using Node.js and Composer:

npm install

Note that both Node.js and PHP 7.2 or later are required on your computer for running the npm scripts. Use npm run docker -- npm install to run the installer inside a Docker container if you don't have the required version of PHP installed locally.

3. To use the Vagrant based environment, run:

vagrant up

which will make it available at enma.local.

Use the included wrapper command for running scripts inside the Docker container running inside Vagrant:

npm run vagrant -- npm run test:php

where npm run test:php is any of the scripts you would like to run.

Visit enma.local:8025 to check all emails sent by WordPress.