General Guidelines

To create a new menu :

1. Navigate to Appearance > Menus.
2. Click on Create a new menu, give the menu a name.
3. Now to the left are available menu items that can be added to the screen, check the items you want to add and click on Add to Menu button.
4. The items are now added to Menu, you can then sort and lay the menu items in levels by drag and drop.
5. Click on Save Menu.
6. After you have saved the menu, hook the menu to any of the available Uneno Nav menu locations.

Theme Locations in Tokoo

Tokoo has six navigation menu locations. They are :

1. Top Bar Left Menu
2. Top Bar Right Menu
3. Departments Menu
4. Primary Nav Menu
5. Secondary Nav Menu
6. Handheld Menu

Enabling CSS Classes Field, Static Content Blocks & Product Category Menu options

By default CSS Classes field, Static Content Blocks and Product Categories menu items may not be available. The will have to be enabled. To enable it please click on Screen Options at the top right screen of Appearance > Menus page. In the pull down menu that appears, check CSS Classes in Show Advanced menu properties. Please also check Static Content Blocks and Product Categories in Boxes. We’ve explained it in the screenshot below.

To make the Menu Item Yellow in Color:

Output

Settings

1. Go back to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter highlight primary-vertical-nav. This will make the menu item YEllOW color in primary menu.
4. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
5. Click on Save Menu.

Making the megamenu dropdown as full-width

Output

Settings

The megamenu now looks advanced and neat. What if we want the megamenu to be full width ? It is easy.

1. Go back to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter yamm-fw. This will make the subitem extend to full width of the container.
4. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
5. Click on Save Menu.

Adding images in Megamenu Fullwidth

Output

Settings for King Composer

Settings for Elementor

• Static Content has 3 columns in the ratio 17% + 33% + 50%
• Column 1– Click on the Add Elements text. It should popup Add Elements screen. Let us add Text Block with below content:
 

• Settings for King Composer

  

  Settings for Elementor

  
 
• Column 2– Click on the Add Elements text. It should popup Add Elements screen. Let us add Text Block with below content:
 
• 
 
• Column 3– Click on the Add Elements text. It should popup Add Elements screen. Let us add Text Block with below content:
 

Making the megamenu dropdown as 3 Half of the width

Output

Settings

1. Go back to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter yamm-tfw.
4. This will make the subitem extend to 3 half-width of the container.
5. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
6. Click on Save Menu.

Adding Class Name for Single Image in Vertical Menu

Output

Settings

1. Navigate to Static Content > Add New.
2. Give it a title, lets say “Women’s Clothing Megamenu Item“. The title is not used anywhere in displaying the menu.
3. Click on Edit with King Composer. It will display King Composer Backend Editor “OR” Click on Edit with Elementor. It will display Elementor Backend Editor
4. We will use this back end editor to build our Women’s Clothing Megamenu Item
5. Women’s Clothing Megamenu Item Item has 2 rows.
6. First row has Single Image Setting. Here is the screenshot for Single Image Setting.


7. On the Row settings of the Single Image Block, add the class name bg-yamm-content in Extra Class Name option. Here is the screenshot for your refenece

Settings for King Composer

Settings for Elementor