
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.
Dive Changelog
Version 1.0.7
- Updated CSS classes to avoid conflicts with other themes
Version 1.0.5
- Added styles for active page
Version 1.0.4
- Fixed bug causing Google Fonts not to work properly
Version 1.0.2
- Added Ability to set a custom open icon
Version 1.0.1
- Fixed toggle alignment issue