Skip to content

# 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 Vodi Nav menu locations.

### Theme Locations in Vodi

Vodi has ten navigation menu locations. They are :

1. Primary Menu
2. Secondary Menu
3. Secondary Nav v3 Menu
4. Offcanvas Menu
5. Navbar Primary
6. Footer v1 Quick Links
7. Footer v2 Primary Menu
8. Footer v2 Secondary Menu
9. Footer v2 Tertiary Menu
10. Footer v3 Menu
11. Landing Menu
12. Comingsoon Offcanvas Menu
13. Landing footer Menu
14. Social Media

### Enabling CSS Classes Field, Static Content Blocks & Mas Videos plugin 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.

Enabling CSS Classes Field, Static Content Blocks & Mas Videos plugin options.

### 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 and yamm-tfw will make the subitem 3 Half of the width.
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.

###### Contents

- Welcome
- Getting Started
  - Introduction
  - Download & Installation
  - Demo Content
    - One Click Demo Import (Recommended)
    - Manual Import
  - Updating the theme
- Set Up Pages
  - Home v1
    - Home v1 via Gutenberg
  - Home v2
    - Home v2 via Gutenberg
  - Home v3
    - Home v3 via Gutenberg
  - Home v4
    - Home v4 via Gutenberg
  - Home v5
    - Home v5 via Gutenberg
  - Home v6
    - Home v6 via Gutenberg
  - Home v7
    - Home v7 via Gutenberg
  - Home v8
    - Home v8 via Gutenberg
  - Home v9
    - Home v9 via Gutenberg
  - Landing v1
    - Landing v1 via Gutenberg
  - Landing v2
    - Landing v2 via Gutenberg
  - Contact
    - Contact via Gutenberg
  - Coming soon
    - Coming soon via Gutenberg
- Blocks & Sidebars
  - Header
  - Sidebars
  - Footer
- Set Up Movie
  - Adding and Managing Movies
  - Managing Movie Genres, Tags and Attributes
  - Manage Movie Playlists
  - Movie CSV Importer
- Set Up TV Shows
  - Adding and Managing TV Shows
  - Managing TV Show Genres, Tags and Attributes
  - Manage TV Show Playlists
  - TV Show CSV Importer
- Set Up Videos
  - Adding and Managing Videos
  - Managing Video Categories, Tags and Attributes
  - Manage Video Playlists
  - Video CSV Importer
- Theme Options
  - Header
  - Footer
  - Blog
  - Movies
  - TV Shows
  - Videos
- Gutenberg Blocks
  - Active Videos
  - Movie Section Aside Header
  - Videos Slider
  - TV Shows Slider
  - Movies Slider
  - Videos Carousel Aside Header
  - Movies Carousel Nav Header
  - Slider Movies
  - section Hot Premier Block
  - Section videos live coming soon
  - Video Section Block
  - Videos with Featured Video
  - Featured Video Section
  - Comingsoon Launch Section
  - Movies List
  - Single Featured movie
  - Blog List Section
  - Blog Grid Section
  - Blog Tab Section
  - Blog Grid with List Section
  - Movies Carousel Flex Header
  - Section Movies Carousel Aside Header
  - Recent Comments
  - Videos Carousel Flex Header Block
  - Event Category List
  - Banner With Section Videos
  - Landing Hero banner
  - Landing Featured Section
  - Landing Movies Carousel Block
  - Landing Tabs Features
  - Landing Featured Video Section
  - Landing Features Section
  - Landing Faq Section
  - Episodes with Featured Episode
  - TV Show Section Block
  - Landing Viewcounts Section
  - Featured Movies Carousel
  - Featured Movie Block
  - TV Episode Carousel Flex Header Block
  - Featured TV Show Block
  - TV Shows Aside Header Block
  - TV Episodes Carousel Aside Header Block
  - Full-width Banner Block
  - Banner With TV Shows Block
  - Videos Carousel Nav Header Block
  - Featured Post Block
  - Vodi Section Playlist Carousel
- Navigation
  - General Guidelines
  - Menus & Locations
  - Creating Megamenus