
Ascend
Table of Contents
- How to use
- Edit Mode
- General
- Toggle
- Menu
- Menu Items
- Colors & Fonts
Introduction
Here you can learn how to use the Ascend scroll-to menu 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
Ascend is pretty easy to get set up! Simply drag the stack onto a stacks page, then add scroll items using the ( + ) button in RapidWeaver.
Once you've added your menu items, you are ready to start adding Scroll Markers to your page. If you search the stack library for "Ascend Marker", you will find the Scroll Marker stack.
Drag a marker to the top of the section on your page that you want your menu item to link to, and then give the marker a unique id, for example
"myphotosection"
Now, return to your menu and click on the item that you want to connect to the "myphotosection" marker. In the settings you will see a Marker ID input.
Simply paste the ID of the scroll marker that you want to scroll to, and you're done!
Now when a user clicks on this item, it will scroll to that particular section on the page~
You can learn more about all of the stack options below. : ]
Edit Mode
Show Markers for testing
Ascend Scroll Markers don't actually show up on your live site, but if you want them to (for testing purposes), check this option
General
Display
This dropdown helps you determine when your Ascend scroll-to menu will appear. There are several options to choose from:
- Always (Shows as soon as the page loads)
- On Scroll to (Shows when the page is scroll to wherever you place the stack)
- Between Scroll Markers (Between two specified scroll markers)
- At Bottom of Page (shows when the bottom of the page is reached)
Open Menu On
Here you can determine whether the menu will be opened on Click or Hover
NOTE: Menus will only open on click for mobile devices, as there is no such thing as hover on mobile
Z-index
Because the Ascend scroll-to menu is fixed, we've included a z-index option for those with other fixed content on their site. If you find that ascend is being hidden behind something, increase this value.
Note: There is no need to adjust z-indexes for multiple Ascend stacks, as this is handled automagically ; ]
Toggle
Here you will find the options for editing the Ascend scroll-to toggle
Vertical Position
Choose where the menu be fixed to the Top or Bottom of the page
Horizontal Position
Choose where the menu be fixed to the Left, Right or Center of the page horizontally.
Size (Button & Icon)
Allows you to specificy the size of the button, and the arrow icon inside.
Offset (Vertical & Horizontal)
Here you can specify the distance of the toggle from the edge of the page
Padding ()
This controls the amount of padding on the inside of the toggle
Radius
This controls the corner roundness of the toggle button
Initial Opacity
It is a common feature of scroll-to-top buttons to be transparent until hovered, here you can specify the initial opacity of the toggle button.
Menu
Here you can set the general menu layout options
Width
Sets the maximum width of the menu
Padding (Vertical & Horizontal)
These inputs simply allow you to set the padding around the edges of the menu.
Radius
Here you can control the corner roundness of the menu.
Hide Header
The Ascend scroll-to menu has a header with a title default, you can choose to hide it by checking this option, for a cleaner look.
Header Text
Sets the text content for the header title.
Header Padding
Sets the padding around the header section of the menu.
Hide default top item
There is a functioning "scroll to top" menu item, added by default. You can hide this item by checking this box.
Allow scroll for long menus
Ascend isn't necessarily meant for long menus, but it is capable of handling them. If your menu is long enough to need scroll bars for scrolling, then check this option. Otherwise, leave it unchecked for a nicer look.
Menu > Items
Here you can edit the styles for the menu items
List Type (List or Grid)
One cool thing about Ascend is that it supports BOTH list and grid style menus!!
Simply select "list" or "grid" from the dropdown and it works like magic~
Note: If you select "grid", you will see a new input appear for specifying the number of columns in your menu grid.
Item Size (Text & Icon)
Simply sets the font size for the menu item text & icons.
Padding (Vertical & Horizontal)
These two inputs control the vertical and horizontal padding around the menu items.
Colors & Fonts
We have placed all of the options for Fonts & Colors of the Ascend stack in one well-organized area. This makes editing super quick and easy!
Toggle Colors
Toggle Icon
Changes the color of the arrow icon in the toggle button
Toggle Dots
Ascend has a unique look with dots letting the user know that there is more to be displayed. You can change the color of these dots and their background here.
Toggle BG (Color or Gradient)
This controls the background of the toggle button.
You can set a single color, or you get select a gradient by clicking the details button (+) in RapidWeaver.
Menu Colors
Menu Header (Background & Text)
Changes the background and text color of the header section in the menu.
Menu Close (Background & Icon)
When a user moves their mouse outside of the menu, a unique pulsing close icon and overlay background appear, showing the user that if they click outside the menu, it will close.
Change the background, and icon color here.
Menu BG (Color or Gradient)
This controls the background of the menu.
You can set a single color, or you get select a gradient by clicking the details button (+) in RapidWeaver.
Menu Shadow
Alows you to set a box-shadow for the menu
Menu Item Colors
Item Text (Initial & Hover)
Changes the text color of the menu items on initial and hover states.
Item Icons (Initial & Hover)
Changes the color of the menu item icons on initial and hover states.
Divider
Changes the border color dividing menu items when in list mode
Ascend Changelog
Version 1.0.5
- Added shadow and controls to toggle
- Added a built in toggle for hiding list-item icons
Version 1.0.4
- Added feature for custom toggle icons!
- Added a checkbox for hiding toggle dots
- Added a feature for setting menu header font weight
Version 1.0.3
- Fixed bug causing fonts not to work
Version 1.0.2
- Added a feature for an optional inline close button
Version 1.0.0
- Initial Release