Dive

Table of Contents

• How to use
• General
• Toggle
• Menu
• Colors & Fonts
• Setting item icons, links, text
• Adding Child Items

---

---

Introduction

Ready to start using Dive?!

It's totally innovative, and simple to setup! : D

Here you can learn how to use the Dive stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. ^_-

---

How to Use

Dive is a piece of cake to set up!

Simply add the Dive stack to your site, and then add Menu items using the (+) button. All of the main styles such as sizing and layout can be found in the main stack.

By default all menu item colors are inherited by the main stack.

If you want a particular item to override the default colors simply check one of the "Custom Colors" option in the settings panel of that particular item!

You can also edit icons, text, and links by clicking on individual items.

If you want to create a second level of menu items under an item, click on the:

Add sub items option.

This will then create a sub section for adding child items. There is no limit to the number of sub sections that you can add! Of course, it isn't recommended to add too many submenus, as that is just more work for the user.

Enjoy! : )

---

General

Z Index

Here you can set a Z index for the Dive menu. This helps to keep the menu on top of any other fixed stacks that you may have.

Offset (Vertical & Horizontal)

Here you can set the offset from the edge of the page that the menu will be displayed.

Align Vertical (Top or Bottom)

Here you can set the vertical alignment of the menu. (Top or Bottom)

Align Horizontal (Left or Right)

Here you can set the vertical alignment of the menu. (Left or Right)

Display Menu

Here you can determine how and when the menu will display, you can choose from 2 options:

• Always
• On Scroll

Note that if you select "On scroll", the menu will display when the stack is scrolled to on the page. Any time before that, the stack will be hidden.

You will also notice a Hide Marker ID section appear. This is an optional field, that allows you to set a special ID for a marker that will hide the menu.

Dive comes with a "Dive Marker" stack, which can be used for hiding menus. Simply add the stack to the area on the page where you want the menu to hide, and the set the "Marker ID" field to the same unique ID that you applied to your Dive Menu.

Now, when the page is scrolled to the stack, the menu will be displayed, and when the page scrolls past the hide marker, the menu will then be hidden.

---

Toggle

Size (Button & Icon)

Here you can set the size of the toggle button and the toggle icon inside of the button.

Toggle Radius

Here you can set the corner roundness of the menu toggle.

---

Menu

Here you will find the majority of options for the Menu.

Max Width

Here you can set the maximum width of the Dive menu.

Radius

Here you can set the corner roundness of the dive menu.

Item Padding (Vertical & Horizontal)

Here you can set the vertical and horizontal padding of the menu items.

Item Text

Here you can set the font size of the menu item text.

Item Arrows

Here you can set the size of the arrows that appear on the right of parent items.

Item Icons

Here you can set the size of menu item icons.

Icon Spacing

Here you can controll the amount of space next to the menu item icons

---

Colors & Fonts

Here you can edit the colors & fonts for the entire stack

Fonts

Here you can set the font for the Menu.

Simply select the font that you want to use from the list, or select "custom google font" and provide the name of a Google Web font that you would like to use.

You can find Google Web fonts here: www.fonts.google.com

You can also select "custom" to set a font name of your own. Note, that you must provide your own font library somehow.

Toggle (Initial & Hover)

Here you can set the color of the toggle button.

Toggle Icon (Initial & Hover)

Here you can set the color of the toggle icon.

Item Text (Initial & Hover)

Sets the color of menu item text

Item Icon (Initial & Hover)

Sets the color of menu item icons

Item Arrows (Initial & Hover)

Sets the color of menu item arrows

Item Borders

sets the color of the small border that appears between menu items. You can hide this by setting the opacity to 0%.

Content (Headers, Links, Text)

Here you can set the color of text that appears in the content sections. You can set a separate color of Headers, Links, and text.

Item Background (Color, Gradient)

Here you can set a background for the menu items. You can set it to:

• Color
• Gradient

Click the ( + ) button to set the background to a gradient.

Item Hover Background (Color, Gradient)

The same as the item background, only it sets the background for menu items when they are hovered.

---

Setting Item Links, Icons, Text

Click on an individual item to edit the item link, icon, and text.

Adding Child Items

You can Add child items by clicking on an individual menu item, and then clicking the "Add sub items", in the settings panel. You wil then see a section appear in the editing area for adding new items.