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