Tutorials stack icon

Icon Menu

Create stunning, popup or full-page, animated Icon Menus for RapidWeaver - by Weavium

Table of Contents

  • How to use
  • General
  • Menu Toggle
  • Menu
  • Menu > Items
  • Menu > Colors
  • Editing Links & Images
  • Custom Colors


Introduction

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

Icon Menu is super easy to get started with! Simply drag the stack onto a stacks page, and then edit the text for your Menu Toggle. After that add menu items using the ( + ) button in RapidWeaver.

You can customize the links and icons for your items by clicking on the individual item itself, and then setting the options in the settings panel.

Finally, you can customize sizes, colums, and colors in the settings panel of the main Icon Menu stack.

The quickest way to get started is to grab one of the examples we've included, and simply change up the links, icons, & colors to your liking! : )


General

Here you can set some general options for the stack such as responsive breakpoints, and the menu type.

Menu Type

Icon Menu allows you to choose between two menu types:

  • Popup (A small popup that appears in the center of the page)
  • Full-page (A full page overlay backgroudn that covers the browser)

Breakpoints

Throughout the Icon Menu stack, you will find options labeled D, T, M. These stand for Desktop, Tablet, & Mobile. These breakpoints determine at which point the tablet and mobile options are applied.


Menu Toggle

Here you will find all of the sizing and spacing options for the Menu Toggle (Button) that is used to open the menu.

Alignment

This option aligns the Menu Toggle horizontally. You can set it to

  • Left
  • Right
  • Center

Text Size

This simply sets the text size of the Menu Toggle button.

Padding (Vertical & Horizontal)

These two inputs control the vertical & horizontal padding on the inside of the Menu Toggle.

Margin (Vertical & Horizontal)

These two inputs control the vertical & horizontal margin around the outside of the Menu Toggle.

Radius

This option controls the corner roundness of the Menu Toggle.

Toggle Font

Here you can select a font for the Menu Toggle. You will find a dropdown with preset fonts, or the option to apply your own Google Web Font.

Setting a Google Web Font is super easy. Just type in the name of the font that you want to use after selecting the 'Custom Google Font' option from the dropdown list!


Menu

Here you will find the sizing and spacing options for the outer menu itself. Things like max-width, padding, title, close-icon etc.

Z-index

This sets the z-index for the menu when opened. Increase this if the Menu is being hidden by other floated stacks.

Max Width (Desktop, Tablet, & Mobile)

This allows you to set a max width for the Menu.

When set to popup mode, this will control the actual size of the menu.

When set to Full-page mode, this will set the maximum width that the inner menu items can extend.

You can set different max-widths for desktop, tablet, and mobile!

Padding (Top, Bottom, Left, Right)

Here you can set the inner padding of the Menu.

Margin (Vertical & Horizontal)

Here you can set the spacing around the Menu. This is also the space that will surround the menu on smaller devices when the menu fills the screen.

Title Size

Each Menu includes a small titles in the top left corner. Here you can set the font-size of that title.

Title Spacing

Here you can specify the amount of space between the title, and the items in the menu.

Title Case

Here you can choose the case of the Menu Title. It can be set to:

  • Normal (Just as you type it)
  • Uppercase (ALL CAPS)

Close Icon

Here you can set the size of the Close (X) Icon in the top right corner of the menu.

Menu Font

Here you can select a font for the Menu. You will find a dropdown with preset fonts, or the option to apply your own Google Web Font.

Setting a Google Web Font is super easy. Just type in the name of the font that you want to use after selecting the 'Custom Google Font' option from the dropdown list!


Menu > Items

This is where you will find all of the sizing and & spacing options for the Menu Items. You can also set the Column Numbers for different device sizes here.

# Columns

These 3 inputs control the number of items per row for Desktop, Tablet, & Mobile devices.

For examples, setting the first input to 3 will make it so that there are 3 items per row on Desktop devices.

Gutters (Vertical & Horizontal)

This controls the amount of space inbetween the menu items

Padding (Vertical & Horizontal)

These inputs control the amount of padding on the inside of each item.

Radius

this controls the corner roundness of the menu items.

Label Size

For each item, there is some label text below the icon. This input contorls the font size for that text.

Icon Size

This controls the size of the actual icon in the menu items.

Icon BG Size

This controls the size of the background portion of the icons in the Menu Items. You'll want this to be larger than the Icon Size mentioned above.

Icon Radius

This controls the corner roundness of the Icon Background in each item.

Icon Spacing

This controls the amount of space between the Icons and the Label text.


Menu > Colors

Toggle Text (Initial & Hover)

Here you can set the color of the Menu Toggle text for both Initial & Hover states.

Toggle BG (Color or Gradient)

Here you can set the background for the Menu Toggle. You can choose a single color, or you can click the (+) expand button to reveal an extra color for a gradient background.

Toggle Hover BG (Color or Gradient)

This is the same as the toggle bg only it controls the background of the Menu Toggle when hovered.

Menu Title

The text color of the menu title

Close Icon

The color of the close icon (X)

Menu BG (Color or Gradient)

Here you can set the background for the Menu. You can choose a single color, or you can click the (+) expand button to reveal an extra color for a gradient background.

Menu Item Label (Initial & Hover)

Here you can set the color of the Menu Item Label text for both Initial & Hover states.

Menu Item Icon (Initial & Hover)

Here you can set the color of the Menu Item Icons for both Initial & Hover states.

Icon BG (Color or Gradient)

Here you can set the background for the Menu Item inner Icon. You can choose a single color, or you can click the (+) expand button to reveal an extra color for a gradient background.

Icon Hover BG (Color or Gradient)

This is the same as the Icon bg only it controls the background of the Icon Background when hovered.

Item Hover BG (Color or Gradient)

Here you can set the background for the Menu Items when hovered.. You can choose a single color, or you can click the (+) expand button to reveal an extra color for a gradient background.


Editing Links & Icons

Links

Links for items can be edited by clicking on the individual item, and then using RapidWeavers built in link option to set the link.

Icons & Images

If you click on an individual item, you will find a dropdown for choosing the icon font for that particular item, and an input for setting the icon code.

Icon codes can be found at eat individual Icons site. Simply type the name of the font into google, and you will find the icon codes for that font.

You can also choose to set an image for the icon. For this you will see a checkbox labeled Use Image Icon. If you check this option then you will see an input appear for adding an image.

Note: Square images work best


Custom Item Colors

In Some cases you may want to have custom colors for a particular item. You can set custom colors by clicking on the individual item, and then going to the Custom Colors section in the settings panel.

You will find individual checkboxes for each type of color. Simply check the color that you would like to override, and then change the color of that particular feature below using the color picker.

Icon Menu Changelog

Version 1.0.4

  • Added fix to remove text underline from menu toggle in certain themes

Version 1.0.3

  • Fixed a small typo related to the new overflow option

Version 1.0.2

  • Fixed bug causing columns to not work properly on mobile & tablet
  • Fixed bug causing image overlays not to show up
  • Added an option for turning off overflow-scroll to hide scroll bars

Version 1.0.1

  • Added the ability to position menu toggle fixed or inline
  • Added the ability to add icons to menu toggle
  • Added the ability to optionally toggle text/icons from menu toggle
  • Updated menu background options to include background images

Version 1.0.0

  • Full-Page or Popup style menus
  • Column options for Desktop, Tablet, & Mobile
  • Add icons from 4 icon fonts, or add custom icon fonts
  • Add custom images in-place of icons
  • Shared or individual menu item colors
  • Super simple Google Web fonts
  • Amazing animations
  • Customizable menu title & close icon
  • Tons of sweet examples included!