Vivid comes with a 'Double Menu'. The primary menu is set to Slide In, and an extra, fullwidth menu module is placed within the header.

The contents of both menus can be edited in Appearance > Menus.

This is the 'Main Menu', it does not have a menu position. Add any pages here you want included in the extra Menu, this menu will not be shown on mobile

To change which menu item is displayed as a button, add or remove the ds-menu-cta class from the CSS classes field.

This is the Slide In menu which is set to the Primary Menu position. In this menu you need to add all of your pages (including those you add to the Main Menu so they display on mobile). 

Once you have added all of your menu items, you can choose which to hide from desktop display by adding ds-hide-menu to the CSS class field. This will ensure those items show on tablet and mobile but not on desktop, when the extra menu is active.

To change the words displayed before the Slide in menu open and close icons on desktop, find the following section of CSS in the stylesheet and edit the words as needed:

To change the words displayed before the Slide in menu open and close icons on tablets and mobile, find the following section of CSS in the stylesheet and edit the words as needed: