OVERLAY MENU
A stunning customizable menu that fills the entire window
Update Version 2.0.0
Overlay Menu has been overhauled to bring it up to date with current design trends & regulations. With all new features, improments, & bug fixes this menu can serve as a go to stack for your RapidWeaver projects. Use it as a main menu, a secondary menu, or even a descrite content area that supports most 3rd-party stacks.
Custom Content Area
Lorem ipsum dolor sit amet sapien platea.
Lorem ipsum dolor sit amet sapien platea.
Forgo a the built in list stacks all together and use your own stacks to create whatever menu or non-menu you see fit.
- Current page will now highlight automatically
- New option to align the entire menu to the left, center, or right
- Create custom toggle icons using images
- Use custom fonts by title or inherit the theme or framework font
- The stack settings have been streamlined for easier setup and use
- Edit mode has been redesigned to be less busy
- Performance while editing menu settings has been improved
- The "Replace Theme Menu" has been updated to work in more themes
- Ionicons do not load from an external file
- Fonts no longer load externally & the Webfont Helper stack is included
- Bug that could cause the page to jump to the top after opening the menu
- Reduced errors when uploading custom menus with lots of items
Menu Styles
Menu Types
Project or Custom Menus
By Default the Overlay Menu uses your RapidWeaver project menu. No setup needed, simply drag and drop. Of course, we've also included the option to create your own custom menus using customizable and easy to add menu list items.
Use Project Menu
Create Custom Menu
Align Menu
Align Text
Use Custom Fonts
Set Menu Width
Customizable Overlay
Overlay Backgrounds
Easily create a menu that blends perfectly with your site using background options such as Solid Colors, Gradients, and even Images!
Colors
Gradients
Images
Background Opacity
You can also change the opacity of the backgrounds for a sleek over-the-page look~
Menu Toggle Styles
Menu Toggle Text / Icons
Icons + Text
Create Menu Toggles with Icons, Text, or a combination of both. Use a custom icon or even use a custom image.
Custom Text
Icons
Images
Menu Toggle Styles
Did we mention styles?
We may sound like a broken record, but just like the menu itself, the toggle can be fully customized with Backgrounds, Colors, Shadows and more!
Colors
Backgrounds
Shadows
Shapes and Sizes
Easily change the shape and size of your toggle with Radius, and Padding options. Create square, rounded, and circular toggles
Menu Toggle Positioning
Inline / Fixed
By default the Overlay Menu Toggle is fixed and scrolls with the page. Though, you can easily set it Inline and place it with your content.
Alignment
Simple options allow the Overlay Menu Toggle to be aligned Left, Right, or Centered. Spacing can be easily changed by editing the margins.
Extra Toggles & Links
Multiple Toggles, One Menu
That's right! Create Multiple toggles that link to the same Overlay Menu using the Unique Menu ID setting, or the included Extra Toggle stack
Bonus Tip
You can even use a basic link to toggle your menu by adding the following attribute to a link tag: data-id="UNIQUE_MENU_ID"
Just replace the UNIQUE_MENU_ID with your Overlay Menus id value.
Basic Content
Add an extra-link anywhere in text like this one or add an extra inline toggle like the one below.
Menu Item Styles
List Icons & Subtitles
List Icons
You can now add list-icons to menu links giving your user a visual idea of what a page represents!
Subtitles
If icons aren't enough, you can even add subtitles to provide a short description of a list-item.
Menu Footer Section
Drop Stacks here
Add Extra Content
We've included a footer section at the bottom of the menu where other stacks can be placed. Easily add footer content like contact info or social icons.