Sidebar

Table of Contents

• How to use
• General
• Sidebar Items
• Sidebar Dividers
• Colors & Fonts

---

---

Introduction

Excited to start using Sidebar?!

It's gonna be great! ^_-

Here you can learn how to use the Sidebar 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

Sidebar is quite easy to get setup!

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

By default all Sidebar Item colors are inherited by the main stack. If you want a particular Sidebar item to override the default colors simply check one of the "Custom (Style)" toggles in the settings panel of that particular item!

Lastly, look in the "General" section for all of the main alignment and positioning options. Sidebars are fixed to the page by default, but you can choose to have your sidebar "Inline" if you'd like. Once you set the Sidebar to "inline" you will then see a content section appear, where you can place the content that will be next to your sidebar.

Enjoy! : )

---

General

Hide Logo

Sidebar includes an area for adding a logo. In fact, you have two image options for adding 1 small logo, and 1 large logo for when the menu is expanded. If you do not want to have a logo in your sidebar, check this option.

Open On (Toggle or Hover)

Here you can specify whether your menu should expand with a toggle, or simply when the menu is hovered.

Type (Fixed or Inline)

Here you can select whether the Sidebar menu should be fixed to the page or inline.

Fix to (Left / Right)

Choose whether the menu will be positioned to the left or right. This works for both fixed and inline sidebars.

Offsets (Vertical & Horizontal)

When the sidebar is fixed, you can set custom offsets from the edge of the page. Edit these offsets here.

Radius

Determines the corner roundness of the sidebar

Padding (Vertical & Horizontal)

Sets the amount of padding on the inside of the sidebar.

Content Padding (Inline Sidebars Only)

When a sidebar is set to inline, a content section will appear. You can adjust the inner padding of this content section here.

Expand Width

Here you can set the width of the sidebar when it is expanded.

Toggle Icon Size

Here you can set the font-size of the toggle icon.

Logo Dimensions (Width & Height)

When the sidebar is expanded, a larger logo appears. You can set the specific demensions of this logo here. The dimensions are maximum demensions, so the logo will automatically shrink on smaller devices.

Logo (Small & Large)

Here you will find two image inputs, one for the small logo and one for the large logo.

The small logo will appear when the sidebar is closed, and it will match the size of the Item Size in the "Sidebar Items" section.

The large logo will display when the sidebar is expanded, and will match the dimensions specified above in the "Logo dimensions" option.

---

Sidebar Items

Icon Position (Left or Right)

Determines whether the icons are on the left or the right.

Item Size (Square Dimensions)

Here you can set the size of the sidebar items. Note that there is only one input, because sidebar items are always perfectly square.

Item Radius

Adjusts corner radius of the sidebar items

Item Padding

Adjusts the inner horizontal padding of the sidebar items

Item Spacing

Adjusts the amount of vertical space between sidebar items.

Text Size

Sets the font size of sidebar item text

Icon Size

Sets the font-size of the sidebar item icons.

Icon BG Size

Sets the size of the sidebar item icon background

Icon Radius

Sets the corner roundness of the sidebar item icon backgrounds

Icon Spacing

Sets the amount of space between sidebar item icons and item text

---

Sidebar Dividers

If you click on an indvidual sidebar item, you will see an option called "Act as divider". If this option is clicked, the item will turn into a simple text divider. Here you can edit the sizes for all sidebar dividers

Spacing

This edits the amount of space around the sidebar dividers

Text Size

Sets the font size of the sidebar divider text

Text Weight

Sets the font-weight (thickness) of the sidebar divider titles.

---

Colors & Fonts

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

Fonts

Here you can set the fonts for the Text and Dividers of the sidebar.

Simply select the font that you want to use from the list, or select custom 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

Main Background (Off, Color, Gradient, Image)

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

• Off
• Single Color
• 2 Color Gradient
• Background Image

Toggle Icon (Initial & Hover)

Set the color for the toggle icon on initial & hover states

Sidebar Item Text (Initial & Hover)

Sets the color of text in the sidebar items

Sidebar Item Icons (Initial & Hover)

Sets the color of actual sidebar icons

Sidebar Item Icon Backgrounds (Initial & Hover)

Sets the background color sidebar item icons

Tab Text (Initial & Hover)

Here you can set the color and Category tab text.

Item BG & Hover BG

Here you can set the background color of the sidebar items. Click the ( + ) button to set it to a gradient.

Divider Text

Here you can set a color for the divider text

---

Setting Custom Individual Colors

If you want to set custom colors for a sidebar item, click on the individual item that you want to customize and check one of the the "Custom (Style)" checkboxes. Then you can set the custom color for that particular style. : )

---

Sidebar Item Options

Act as Divider

If this option is checked, the item will turn into a text divider that is only displayed when the sidebar is expanded.

Push items Up/Down

If you check the "Push Items Up" option, all of the items before the selected item will be pushed upward.

If you check the "Push Items Down" option, all of the items after the selected item will be pushed downard.

Hide Icon / Text

These checkboxes can be used to hide item icons/text when the sidebar is expanded. Note that when the sidebar is closed, only icons will be displayed.

This option is useful for creating items that turn into text-only buttons when the sidebar is expanded.

Link

Here you can set a link for the sidebar Item

Item Icon Font & Icon Code

Here you can select from a list of icon fonts, and then set the specific icon code for that font.