How to Create the Child Navigation Effect on the Nature Photographer Kit

The Nature Photographer Kit features navigation that uses a popup and a vertical navigation menu. When kits are imported, they do not automatically create menus in WordPress. You must recreate this vertical menu in Appearance > Menus. 

Getting Started

This child navigation effect is created by using the “└” symbol in the menu navigation label as shown below.

Wildlife

└ Glowing Jellyfish

└ Fluttering Birds

Creating The WordPress Menu

Create A New Menu

Create a new menu from Appearances > Menus. Give it a name (example: Popup Vertical Menu).

Add Menu Items

Select the pages that you want to include. For this tutorial we will use the ones that are imported in the kit but you may add your own later.

Arrange The Menu Items

Drag and drop the menu items in the order that you want to appear. For this menu we are going to leave all items as parent menu items with no child items.

Adding The Symbol To The Child Pages

For each page in your menu that you wish to visually represent a child page, expand the menu items toggle options. Enter the “└ “ symbol before the page name. You may copy the symbol from above and paste it into the field.

Tip: This uses unicode Box Drawing Light Up and Right. HTML Entity: └ └ └

Save The Menu

You now need to save your menu by clicking the blue button in the lower corner of your screen.

Adding The Menu To Popup

Navigate to the Popup template library located in Dashboard > Templates > Popups. Here you will see the imported kit menu popup. Click the Edit With Elementor link.

Assign The Menu To Widget

Edit the navigation menu widget located in the right column. Select your new menu in the dropdown. You will now see the child navigation effect that is in the Kit Template Library. 

Note: This popup also uses another menu named “Main” for the bottom horizontal links. It will need to be created as well.

Publish The Popup Changes

Click the publish button. The above screen will appear. For navigation popups, you will not need to set any conditions. Click the save and close button. 

Editing The Header

In Theme Builder, click on Header templates. Then click to edit the kit’s Header template. 

Assign The Popup To Header Icon

Edit the Icon Widget located at the top left of your screen. From the link options, choose the popup in the dynamic links. Enter the name of our popup into the settings by clicking the wrench icon. Type a few letters into the field and select our menu popup.

Publish Your Changes

You may now publish your changes and return to the dashboard.

Test Your Popup

Return to the homepage of your website and click the menu icon to test the popup. If you have completed all the above steps, you should now see the completed menu as seen in the demo. You may now remove the demo content and replace it with your own.

Additional Learning

CSS Subitems

If you would like to automatically have that symbol on your child items in a horizontal navigational (traditional) menu. You may add the following CSS code to your preferred location. 

.elementor-sub-item:before {

  content: “└”;

    margin-right: 5px;

}

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page