1. Home
  2. Docs
  3. Vive
  4. Header
  5. Creating Fullscreen menu using Elementor

Creating Fullscreen menu using Elementor

What is Fullscreen menu?

Fullscreen Menu is extensive sub menu which allow you to display various of menu links or other rich information including images, videos on full page content area. You can see an example of fullscreen menu on our demo page here.

Creating Fullscreen menu using Elementor

First please install and activate Elementor and Vive Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

Create Fullscreen menu content posts

We are using Elementor Page Builder plugin so you can use its drag&drop user interface to create your mega menu contents.

Please navigate to WordPress Dashboard > Mega Menus > Add New Mega Menu. Then enter its title and click “Edit with Elementor” option.

Now you will open Elementor page builder editor. You can import demo mega menu by clicking on template button.

It will open a popup box. Click on “Blocks” tab and filter only “Theme Fullscreen Menu” option. Then select mega menu you want to import by clicking “Insert” button.

Elementor will ask to connect Elementor to your website. You have to create Elementor account and connect it to your website within this process (If you have already connected to Elementor. You can skip this step).

Once it’s imported successfully. You can customize menu columns, contents including social icons, buttons, logo image etc.

Set site’s default Fullscreen Menu Post

Once you create a new fullscreen menu post. Next step is to setup the fullscreen menu as default one on your site.

Please navigate to WordPress Dashboard > Customize > Navigation > Fullscreen Menu > Default Fullscreen Menu and select the on your just created.

Add a link to Fullscreen Menu Post content using Elementor

One you have fullscreen menu post as default. The next step is to link element to open fullscreen menu content. So when user clink over assigned element. It will open selected fullscreen menu.

You can use widget such as button to add link to mobile menu. By open widget options. Click on “Advanced” tab and open “Link Options” then check “Link to fullscreen menu” option.

 

 

Tags ,
Was this article helpful to you? Yes No

How can we help?