Table of Contents
- How to use
- Sidebar Items
- Sidebar Dividers
- Colors & Fonts
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! : )
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.
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.
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.
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.
Adjusts corner radius of the sidebar items
Adjusts the inner horizontal padding of the sidebar items
Adjusts the amount of vertical space between sidebar items.
Sets the font size of sidebar item text
Sets the font-size of the sidebar item icons.
Icon BG Size
Sets the size of the sidebar item icon background
Sets the corner roundness of the sidebar item icon backgrounds
Sets the amount of space between sidebar item icons and item text
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
This edits the amount of space around the sidebar dividers
Sets the font size of the sidebar divider text
Sets the font-weight (thickness) of the sidebar divider titles.
Colors & Fonts
Here you can edit the colors & fonts for the entire stack
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:
- 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.
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.
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.
- Added overflow-scroll option
- Removed manual active page checkbox
- Added "Page Title" input for active link functionality
- Changed active page status to manual checkbox to ensure style change
- Added active page styles to sidebar links
- Removed overflowing scrollbars
- Added option for tooltips when the sidebar is closed
- Fixed short delay in text display when sidebar is set to open on hover
- Added option for opening links in a new window
- Added a new "Image icon from link" option for sidebar item icons
- Added feature for condensing sidebar on mobile devices
- Initial Release